Vue.js - 使用 on-mouse-click 处理事件（而不是 up）

Question

在Vue.js 2中，当我给一个元素添加了@click事件并尝试点击它时，事件直到我完成点击（按下 - 松开）后才会被触发。

如何在鼠标点击下立即触发事件？

示例：

<div @click="foo()">
    Hello
</div>

- Ben

Answer 1

你可以在元素上使用@mousedown事件，就像@click一样，来处理mousedown事件。

<button @mousedown="mouseDown">
   mouseDown 
</button>

请查看可工作的代码演示：https://fiddle.jshell.net/mimani/feL03wgd/

- Saurabh

---

可以这样做，但我还有一个@contextmenu...当使用@mousedown时似乎会触发左右两个点击。 - Ben

@Ben，你能在JSFiddle上复制这个吗？ - Saurabh

https://fiddle.jshell.net/qtso6hqk/但是没关系；mousedown 技术上是用于鼠标按下的。感谢 Saurabh 的帮助。 - Ben

Fiddle是一个损坏的链接。 - Michael Giovanni Pumo

只是针对关于 @mousedown 被左键、右键（和中键）触发的评论进行说明。您可以使用 Vue 的键修饰符来指定事件的附加条件。为了将鼠标点击事件限制为仅限左键点击：'@mousedown.left' 和 '@mouseup.left'。 - Air

（忽略最后两个鼠标事件周围的单引号。Stackoverflow认为我试图引用用户，并说我只能在评论中引用一个用户） - Air