在html/javascript中要求撤消/重做事件 [英] Asking for undo/redo events in html/javascript

问题描述

我有一个交互式html5画布内容，有时用户会希望撤消其操作.我已经实现了执行该操作的逻辑，但是我不确定如何正确捕获用户要撤消"事件.

I have an interactive html5 canvas thing where sometimes users will want to undo their actions. I have the logic for doing that implemented, but I'm not sure of how to properly catch the "user wants to undo" event.

目前，我只是听键盘事件，并将"CTRL + Z"解释为撤消请求，如下所示:

Currently, I just listen to keyboard events and interpret "CTRL+Z" as a request-to-undo, like this:

document.addEventListener("keydown", e => {
    const Z_KEY = 90;
    let isUndo = e.keyCode == Z_KEY && e.ctrlKey && !e.shiftKey;
    if (isUndo) {
        restore(revision.undo());
    }
});

问题在于，撤消操作的标准快捷方式因操作系统而异，并且有完全正交的方式来触发它(例如

The problem is that the standard shortcut for undo-ing varies by OS, and there are totally orthogonal ways to trigger it (such as shaking your phone).

我想要的是以某种方式告诉浏览器我支持撤消，并且它应该将所有触发撤消的特定于操作系统的疯狂方式转发给我指定的方法.从目前的情况来看，浏览器不知道用户正在做任何涉及撤消操作的事情.浏览器所看到的只是一个被单击并绘制到其上的画布.

What I want is to somehow tell the browser that I'm supporting undo, and that it should forward all the crazy OS-specific ways of triggering undo to a method I specify. As things stand now, the browser has no idea the user is doing anything that would involve undo-ing. All the browser sees is a canvas being clicked on and drawn to.

是否有一种标准方法要求浏览器为我捕获所有 个撤消事件?以一种面向未来的方式在供应商发明新的撤消操作时仍能正常工作吗?骇客解决方法如何?也许有一个图书馆的重点是解决这个特定问题?

Is there a standard way to ask the browser to catch all the undo events for me? In a future-proof way that keeps working even as vendors invent new undo actions? What about a hacky workaround? Or perhaps there's a library whose focus is to solve this particular problem?

注意:

• 此问题不同于如何在javascript中处理撤消/重做事件?.那是关于捕获元素更改的问题，而我总是知道任何更改，因为我的代码就是执行这些更改的代码.
• 问题听内容可编辑div中的undo/redo事件也是关于更改检测而不是执行撤消，并且仅限于特定类型的元素.我愿意使用自定义元素来完成这项工作.

• This question differs from How to handle undo/redo event in javascript?. That one is asking about catching changes to an element, whereas I always know about any changes because my code is the one performing those changes.
• The question Listen to undo/redo event in contenteditable div is also about change-detection instead of implementing undo, and is limited to a particular type of element. I'm willing to use custom elements to make this work.

推荐答案

由于没有针对它们的特定事件，因此没有标准的javascript方法来钩住undo/redo之类的东西.

There's no standard javascript way of hooking things like undo/redo as there is no specific event for them.

也许捕鼠器可以满足您的需求.这是一个用于在javascript中提取键盘事件的库，并提供了一种执行通用 [system修饰符] + key 热键之类的方法.

Maybe Mousetrap does what you want. It's a library for abstracting keyboard events in javascript and includes a way to do a generic [system modifier]+key hotkey kind of thing.

也就是说，如果您想使用手机，则可能需要在某个地方放置一个按钮.(我对撤消操作不熟悉.这似乎是新时代嬉皮的废话.= P)

That said, you'll probably need a button somewhere if you want mobile. (I'm not familiar with the shake-to-undo action. That seems like new age hippy nonsense. =P )

这篇关于在html/javascript中要求撤消/重做事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！