Vue中如何区分@click与@keydown.enter事件，避免回调重复触发

问题本质 #

HTML原生<button>元素在获得焦点时按下回车键，会默认触发click事件，这是浏览器的标准行为，所以你绑定的两个事件回调会先后执行，导致状态被两次取反。

最优解决方法：阻止键盘事件的默认行为 #

直接给@keydown.enter添加.prevent修饰符，拦截浏览器默认触发的click事件，从根源避免重复触发，无需修改现有回调逻辑：

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

方案二：在回调中判断事件触发来源 #

如果你确实需要保留默认行为，区分鼠标点击和键盘触发的事件，可以通过事件对象的属性判断：

过滤键盘触发的click事件 #

键盘触发的click事件的event.detail属性值固定为0，鼠标点击的event.detail对应点击次数（单次点击为1，双击为2），可以在toggleModal里加过滤逻辑：

toggleModal(event) {
  // 过滤掉键盘触发的click事件，只处理鼠标点击
  if (event.detail === 0) return
  this.showModal = !this.showModal
}

通用触发源判断逻辑 #

也可以直接通过事件类型和参数判断触发来源：

function getTriggerSource(event) {
  if (event.type === 'keydown' && event.key === 'Enter') {
    return 'keyboard_enter'
  }
  if (event.type === 'click') {
    return event.detail > 0 ? 'mouse_click' : 'keyboard_click'
  }
}

内容的提问来源于stack exchange，提问作者Michael Andorfer