Vue Ctrl + S事件监听器未触发

Question

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

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

在按下's'（和alt+s）时会触发doSave事件，但在ctrl+s上不会触发。

为什么不ctrl+s被解雇？

奖金问题：是否有一种方法可以对preventDefault不进行编码？以某种方式可以添加.once，但文档却含糊不清。

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

Answer 1

您的问题中有几个问题，因此我将一一回答：

为什么不触发ctrl + s？

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

对于要在div上注册的任何事件，您的div 必须具有焦点，因为否则该事件将不会源自该元素，而是（可能会）来自正文。

是否有一种无需编码就可以防止Default的方法？

是的。将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!");
    },
  }

Answer 2

@Sumurai8 的回答很好，但我会通过检查 e.metaKey 是否 == true 来添加对苹果设备的支持。代码如下所示：

      mounted() {
        document.addEventListener("keydown", this.doSave);
      },
    
      beforeDestroy() {
        document.removeEventListener("keydown", this.doSave);
      },
    
      methods: {
        doSave(e) {
          if (!(e.keyCode === 83 && (e.ctrlKey || e.metaKey))) {
            return;
          }
    
          e.preventDefault();
          console.log("saving from DOM!");
        },
      }