vue.js - Vue ctrl+s 事件监听器未触发

Question

我的应用程序对话框应响应“Ctrl+S”以获取保存功能并取消默认的浏览器保存事件。

<div
  @keyup.83="doSave"
  @keyup.ctrl.83="doSave"
  @keyup.alt.83="doSave"
  tabindex="0">

doSave 事件在按下“s”(和 alt+s)时触发，但在 ctrl+s 时不会触发。

为什么 ctrl+s 没有被触发？

红利问题:有没有办法不用编码就preventDefault？不知何故应该可以添加 .once 但文档含糊不清。

https://codepen.io/cawoodm/pen/qvgxPL

Answer 1

你的问题中包含了几个问题，所以我将一一回答:

为什么没有触发 ctrl+s？

有几个原因。您正在使用 keyup 事件，而浏览器开始在 keydown 事件上保存页面。因此永远不会触发您的 keyup 事件。

对于要在您的 div 上注册的任何事件，您的 div 必须具有焦点，否则事件将不会源自该元素，而是(大概)主体。

有没有一种方法可以在不编写代码的情况下阻止默认设置？

是的。将 prevent 修饰符添加到您的事件中。同理，可以使用once在事件触发一次后取消注册，stop使用stopPropagation()和 passive 明确不停止传播。你会使用像这样的东西:@keydown.ctrl.83.prevent="saveMe"。

我如何让它工作？

如果您同意用户必须在能够保存之前聚焦元素，否则会获得默认行为，请使用以下内容:

<div
  id="app"
  tabindex="0"
  @keydown.ctrl.83.prevent.stop="saveInsideComponent"
>
  <!-- -->
</div>

否则，这是注册您自己的事件监听器的少数几个有用的时刻之一。只需确保在您的组件被销毁之前将其删除，否则您将遇到一个流氓事件监听器，它会在其他组件上抛出错误 + 内存泄漏需要处理。

  mounted() {
    document.addEventListener("keydown", this.doSave);
  },

  beforeDestroy() {
    document.removeEventListener("keydown", this.doSave);
  },

  methods: {
    doSave(e) {
      if (!(e.keyCode === 83 && e.ctrlKey)) {
        return;
      }

      e.preventDefault();
      console.log("saving from DOM!");
    },
  }