Question

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

这是一个简单的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>

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

使用dispatchEvent在Chrome中为我发起三次事件，但在其他浏览器中可能存在差异。
为了使其始终保持气泡，可以设置bubbles设置，这样它将表现为常规点击和冒泡。

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

鼠标单击vs jquery单击vs dispatchEvent单击

1 个答案: