stopPropagation/prevent链接内元素的默认行为

我试图理解当 a 中的元素出现时的行为<a> have a event.stopPropagation() or event.preventDefault().

在第一种情况下，单击<div>还触发了<a>事件，将其移动到另一个页面。event.stopPropagation()没有影响。

如果我改变event.stopPropagation() to event.preventDefault()，当点击div时，控制台记录"div", the <a>不会触发任何事件，但复选框停止工作。所以event.preventDefault()影响子元素。

我在这里缺少什么？

.html

<a href="#" target="_blank">
  <div>
    <input type="checkbox"/>
  </div>
</a>

.js

var div = document.querySelector('div');

div.addEventListener('click', function(event) {
  event.stopPropagation();
  // event.preventDefault(); # second case
  console.log('div');
});

.css（只是为了更容易在屏幕上看到）

a {
  display: block;
  background: black;
  width: 300px;
  height: 100px;
}

div {
  background: red;
  width: 50px;
  height: 50px;
}

event.preventDefault()将阻止 href 和复选框触发其默认事件，因为它是冒泡事件。

“当事件被分派到参与树的对象（例如元素）时，它也可以到达该对象祖先上的事件侦听器。首先，按树顺序调用捕获变量设置为 true 的所有对象的祖先事件侦听器.其次，调用对象自己的事件侦听器。最后，只有当事件的 bubbles 属性值为 true 时，才会再次调用对象的祖先事件侦听器，但现在以相反的树顺序。” -https://dom.spec.whatwg.org/#dom-event-preventdefault https://dom.spec.whatwg.org/#dom-event-preventdefault

When you use event.stopPropagation() you are preventing any parent (or child if bubbling = true) from being notified of it's event. This will not prevent it's default event from being fired.

要检查事件是否正在冒泡，您可以使用var x = event.bubbles; console.log(x);

edit: here's an example of how to use event.preventDefault() and event.stopPropagation() in conjunction -

var div = document.querySelector('div');
var a = document.querySelector('a');
a.addEventListener('click', function(event){
    event.preventDefault();
});
div.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('div');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" target="_blank">
  <div>
    <input type="checkbox"/>
  </div>
</a>

这将阻止附加到的点击事件<a>从达到任何超越<div>