在 html/javascript 中请求撤消/重做事件

Question

我有一个interactive html5 canvas thing，有时用户会想要撤消他们的操作。我已经实现了执行该操作的逻辑，但我不确定如何正确捕获“用户想要撤消”事件。

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

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

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

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

是否有一种标准方法可以让浏览器为我捕获所有撤消事件？以一种面向未来的方式，即使供应商发明新的撤消操作也能继续工作？一个hacky的解决方法呢？或者也许有一个图书馆专注于解决这个特殊问题？

注意事项：

• 这个问题不同于How to handle undo/redo event in javascript?。那是询问是否要捕获对元素的更改，而我总是知道任何更改，因为我的代码是执行这些更改的代码。
• Listen to undo/redo event in contenteditable div 的问题也是关于更改检测而不是实现撤消，并且仅限于特定类型的元素。我愿意使用自定义元素来完成这项工作。

Answer 1

没有标准的 javascript 方式来挂钩诸如撤消/重做之类的事情，因为它们没有特定的事件。

也许Mousetrap 可以满足您的需求。它是一个用于在 javascript 中抽象键盘事件的库，并包含一种执行通用 [system modifier]+key 热键之类的方法。

也就是说，如果您想要移动设备，您可能需要一个按钮。 （我不熟悉摇动撤销动作。这似乎是新时代嬉皮士的废话。=P）