vue中如何区分@click和@keyup.enter？

问题描述

我有以下按钮：

<button @click="toggleModal" @keydown.enter="toggleModalWithFocusTrap">

在我看来，在 vue 中，click 和 enter 两个事件是等效的。这让我想到了同时调用事件 toggleModal 和 toggleModalWithFocusTrap 的问题，这会立即关闭模态，因为 this.showModal = !this.showModal 首先设置为 true，并设置之后立即false。

因此，我的问题是如何确定事件是由鼠标单击还是按键盘上的 Enter 键触发。

解决方法

在事件处理程序中添加表示事件的参数，然后从 type 属性中获取事件名称：

toggleModal(event){

   if(event.type==='click'){
       // do some stuff

   }else if(event.type==='keydown'){
        // do other stuff
   }


}