javascript - 为什么 jQuery 中的 click() 方法与 DOM click method() 的行为不同？

Question

为了触发它的点击事件，我已经厌倦了在子元素上模拟点击事件，而它的父元素上也有点击事件。 起初，我认为我可以通过以下任一方式做到这一点:

document.getElementById('child').click();

或者在 jquery 中

$('#child').click();

然而，后来我发现这两种方法的行为不同。

dom 的方法按预期触发了点击事件，但 jquery 的方法触发了父元素的点击事件两次。

这是一个关于 fiddle 的例子。 https://jsfiddle.net/5t5jc7ey/

谁能解释一下为什么 jquery 会为父元素的点击事件触发两次？

Answer 1

我可以得出的结论是，父级的第一次点击是由于事件冒泡而发生的，而第二次父级触发了自己的默认点击事件，因此它再次点击。所以我通过使用 e.preventDefault();

避免了默认行为

working demo

查看代码以获得更清晰的想法:

$('#jquery').click(function() {
  $('#child').click(function(e){e.preventDefault();}).click();
});

$('#dom').click(function() {
  document.getElementById('child').click();
});

I will try to explain again:

1.The first click event of parent gets triggers due to event bubbling.

2. Second click event of parent is due to browser's default action which you can see by clicking on the div itself. I am preventing browser default action by using e.preventDefault();

在输出中，您在我的 fiddle 中看到的父单击事件是由于事件冒泡引起的。所以它给出了所需的答案