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

Question

我有一个交互式的html5画布,有时用户会想要撤消他们的动作.我有实现的逻辑,但我不确定如何正确捕获"用户想要撤消"事件.

目前,我只是听键盘事件并将"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());
    }
});

问题在于撤消的标准快捷方式因操作系统而异,并且有完全正交的触发方式(例如摇动手机).

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

有没有一种标准方法可以让浏览器为我捕获所有撤消事件？在面向未来的方式中,即使供应商发明了新的撤消操作,它也能继续工作？什么是hacky解决方法？或者也许有一个图书馆,其重点是解决这个特殊问题？

笔记:

• 这个问题与如何在javascript中处理撤消/重做事件有所不同？.那个问题是要求对元素进行更改,而我总是知道任何更改,因为我的代码是执行这些更改的代码.
• 在contenteditable div中监听撤消/重做事件的问题也是关于变更检测而不是实现撤销,并且仅限于特定类型的元素.我愿意使用自定义元素来完成这项工作.

Answer 1

没有标准的javascript方式来挂钩像undo/redo这样的东西,因为它们没有特定的事件.

也许Mousetrap做你想要的.它是一个用于在javascript中抽象键盘事件的库,包括一种执行通用[system modifier]+key热键类型的方法.

也就是说,如果你想要手机,你可能需要一个按钮.(我不熟悉摇动到撤消的动作.这似乎是新时代嬉皮士的废话.= P)