Javascript 链接内元素的stopPropagation/preventDefault行为

我试图理解

中的元素具有

事件.stopPropagation（）

或

事件.preventDefault（）

时的行为

在第一种情况下，单击

也会触发

事件，将其移动到另一个页面<代码>事件。停止播放（）无效

如果我将

event.stopPropagation（）

更改为

event.preventDefault（）

，当在div中单击时，控制台会记录“div”，

不会触发任何事件，但复选框会停止工作。因此

event.preventDefault（）

会影响子元素

我错过了什么

.html

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

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

event.preventDefault（）

将阻止href和复选框触发其默认事件，因为它是冒泡事件

“将事件分派到参与树的对象（例如元素）时”，它也可以到达该对象的祖先上的事件侦听器。首先，按树顺序调用捕获变量设置为true的所有对象的祖先事件侦听器。其次，调用对象自己的事件侦听器。最后，仅当事件的气泡属性值为true时，才再次调用对象的祖先事件侦听器n、 但现在以相反的树顺序排列。”

当您使用

event.stopPropagation（）

时，您正在阻止任何父级（如果bubbling=true，则为子级）收到其事件的通知。这不会阻止触发它的默认事件

要检查事件是否冒泡，可以使用

var x=event.bubbles；控制台日志（x）

编辑：下面是一个如何结合使用
event.preventDefault（）
和
event.stopPropagation（）
的示例-
var div=document.querySelector（'div'）；
var a=document.querySelector（'a'）；
a、 addEventListener（'click'，函数（事件）{
event.preventDefault（）；
});
div.addEventListener（'click'，函数（事件）{
event.stopPropagation（）；
console.log（'div'）；
});

可能，尝试使用
event.stopImmediatePropagation（）
，这样它将立即停止传播。检查这个-@telmanagabov它没有成功，但无论如何还是要谢谢你。谢谢你的回答@Inkdot，但我不明白你说的关于
preventDefault（）
。单击复选框，冒泡事件按以下顺序发生
input>div>a
，对吗？但是div上有一个
e.preventDefault（）
，因此，据我所知，应该防止默认行为从div开始，而不改变输入。关于你的例子，我想做的是相反的，使
链接工作，如果它直接单击而不工作，则单击事件发生在div内部，但没有更改复选框。你不理解，因为我犯了一个错误。我会更正并解释。@rougeth我希望编辑后的答案能回答您可能还有的任何问题，并澄清关于这两种方法的任何混淆。代码示例应该会给出您想要的。明白了！现在一切都有意义了！非常感谢你。
var div = document.querySelector('div');

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

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

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