时间戳

首页 > 解决方案 > 单击事件未触发，但鼠标悬停工作

javascript - 单击事件未触发，但鼠标悬停工作

问题描述

我在我的项目中使用 Vue JS 并找到了一些绊脚石。

我用过：

<input v-model="spam" @keyup="spamegg=true;" @blur="spamegg=false;" />
<div v-if="spamegg" class="someclass">
    <a v-for="str in arr" @click.prevent="foobar(); barbaz();" href="#">{{ str }}</a>
</div>

但该click事件没有被触发。

我的foobar方法包含：

foobar: function() {
    console.log('clicked');
}

功能也是如此barbaz。

有趣的是我已经检查了@mouseover事件及其正常工作。

FWIW，div就 CSS 而言，实际上是一个下拉列表。

如果您需要任何进一步的信息，请告诉我。

标签： javascriptvue.jsvuejs2vue-component

解决方案

是的，所以我在 jsfiddle 中尝试了你的例子，首先@blur处理程序中有一个错字，你spmaegg把spamegg. 但是，即使修复了此问题，点击事件也无法正确注册。删除模糊事件可以让他们正确注册。我认为这是因为模糊发生在 mousedown 上，但 click 事件直到 mouseup 之后才会被触发，因此包含链接的 div 实际上在您完全点击之前就消失了。不幸的是，似乎您需要一种新的下拉菜单机制，可能是输入元素周围的一些容器和侦听模糊事件的链接列表，这样单击链接列表就不会模糊容器并且它将保持打开状态。

作为参考，这是我删除模糊处理的小提琴，您可以看到控制台输出正确触发：https ://jsfiddle.net/L1khuca2/

推荐阅读