为什么同一元素上的mouseDown事件触发后，click事件不触发？

Question

我有一个在同一元素上的鼠标按下事件（mouseDown）和点击事件（click）。当我单击它时，鼠标按下事件触发并弹出“Mouse pressed on P”的警报，但是点击事件则没有。然而，如果我注释掉鼠标按下警报语句，则点击事件将显示警报。这是为什么？http://jsfiddle.net/A8vhq/

- user1263226

---

尝试使用console.log而不是alert，您将看到两个事件都被触发。在这里检查解释http://api.jquery.com/click/。 - DG3

谢谢大家...我实际上并没有使用警报进行测试，只是在学习和尝试各种鼠标事件，并且无法理解这种行为。 - user1263226

DG3，我查看了那个链接，没有看到任何能解释这个特定观察/行为的东西？ - user1263226

当鼠标被点击时，单击事件的解释。只有在按下的鼠标按钮被释放时，单击事件才会触发。由于您正在使用警报，鼠标释放被阻止，因此单击事件不会发生。 - DG3

是的，我知道必须按下并释放鼠标按钮，我只是不知道警报会打断这个过程。 - user1263226

Answer 1

这是因为当警告框出现时，点击事件从未发生，因此打断了元素的鼠标弹起事件，从而打断了鼠标点击事件。

使用 console.log('message') 来测试您的代码，而不是使用 alert。

- Headshota

---

如果有人需要使用模态框 - 例如，为了中断点击运行代码，然后完成模态框关闭的操作 - 他们该如何解决这个问题。这个问题只在我的 Firefox 中出现。 - user1837608

Answer 2

不要使用alert，改用console.log，就可以正常工作了。

现场演示：http://jsfiddle.net/A8vhq/1/

---

顺便提一下，我稍微重构了一下代码：

$('p').on('mousedown', function (e) {
    console.log('Mouse pressed on ' + e.target.nodeName);
});

$('p').on('click', function (e) {
    console.log(e.target.nodeName + ' clicked');
});

- Šime Vidas

Answer 3

只需将alert替换为console.log或任何其他非模态输出方式。

- Botanick