鼠标点击 vs jquery click vs dispatchEvent click

Question

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

这是一个简单的 html 代码：

<div>test</div>

这是一个 javascript 代码：

$('*').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/

谢谢

Answer 1

星号也与 <html> 和 <body 标签相匹配，并且当您使用星号作为事件处理程序的选择器时，点击事件冒泡会在三个元素上触发。

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

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

当您点击像这样嵌套的 div 时

<html>
    <body>
        <div>

点击向上移动（气泡）并触发所有父元素。

在 Chrome 中使用 dispatchEvent 为我触发事件三次，但在其他浏览器中可能存在差异。
要使其持续冒泡，可以设置 bubbles 设置，这样它就会像常规点击一样冒泡。

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

鼠标点击 vs jquery click vs dispatchEvent click

Mouse click vs jquery click vs dispatchEvent click

html

javascript

jquery

click

mouseevent