时间戳

首页 > 解决方案 > 如何区分vue中的@click和@keyup.enter？

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

问题描述

我有以下按钮：

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

在我看来，在 vue 中这两个事件都是等价的click。enter这导致我遇到两个事件toggleModal同时toggleModalWithFocusTrap被调用的问题，这会立即关闭模式，因为this.showModal = !this.showModal设置为true第一个，然后false立即设置为。

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

标签： javascriptvue.jsmouseeventkeyevent

解决方案

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

toggleModal(event){

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

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


}

推荐阅读