关于javascript：鼠标单击vs jQuery单击vs dispatchEvent单击


Mouse click vs jquery click vs dispatchEvent click

有人可以向我解释为什么实际点击鼠标
和$('div')。click()运行click事件3次，而$('div')[0] .dispatchEvent(new MouseEvent('click'))根据浏览器控制台仅运行一次click事件？

这是一个简单的html代码：

1
test

这是一个JavaScript代码：

1
2
3
4
5
6
7
8
9
$('*').click(function(e){
   console.log(e);
});

var c = new MouseEvent('click');

// Actual mouse click output event 3 times
//$('div').click(); // output event 3 times
$('div')[0].dispatchEvent(c); // output event 1 time

http://jsfiddle.net/5uvjwa4t/2/

谢谢

相关讨论

星号也匹配和标记，并且当单击事件冒泡时，当您使用星号作为事件处理程序的选择器时，它会在三个元素上触发。

1
2
3
$('*') // matches all elements, including html and body

$('div') // matches the DIV only

当您单击嵌套这样的div时，

1
2
<html>
    <body>

该点击会向上传播(冒泡)并在所有父元素上触发。

在Chrome中，使用dispatchEvent会为我触发该事件3次，但其他浏览器可能会有所不同。
为了使其始终起泡，可以设置bubbles设置，这样它将像常规单击一样起泡。

1
var c = new MouseEvent('click', {bubbles:true});

相关讨论