javascript - 链接内元素的 stopPropagation/preventDefault 行为

Question

我试图理解 <a> 中的元素时的行为有一个event.stopPropagation()或 event.preventDefault() .

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

如果我改变 event.stopPropagation()至 event.preventDefault() , 当点击 div 时，控制台记录 “div”，<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;
}

Answer 1

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

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

当您使用 event.stopPropagation() 时您正在阻止任何 parent (或 child ，如果 bubbling = true)被通知它的事件。这不会阻止它的默认事件被触发。

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

编辑:这是一个如何使用 event.preventDefault() 的例子和 event.stopPropagation()结合-

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>以外的任何东西

<a><div><input></div></a>是一个元素。

<div><input></div>也是一个元素。这意味着当stopPropagation()用于 <input> <input> 的点击处理程序将是唯一一个继续工作的。

stopPropagation();作用于点击处理程序事件，而不是默认的浏览器事件。所以当你停止在 <input> 上传播时元素， <a>仍然重定向用户，因为这是它的默认浏览器事件。

然而，console.log('a fired.');和 console.log('div fired');不会触发，因为它们是点击处理程序，而不是默认的浏览器事件。

preventDefault();阻止执行任何默认浏览器操作，而不是点击处理程序。

自 <a><div><input /></div></a>是一个元素，当你使用 preventDefault();在 <a>它将阻止附加到 <a> <div> 的任何默认浏览器操作或 <input />从开火。

所以当你添加 preventDefault()至 <input />并尝试点击它，它的状态不会改变，但是 <a> <a> 时链接仍将按预期运行被点击。

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

a.addEventListener('click', function(event){
    //event.preventDefault();
    //event.stopPropagation();
    console.log('a fired.');
});

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

input.addEventListener('click', function(event) {
  event.preventDefault();
  //event.stopPropagation(); 
  console.log('input fired');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <a><div><input></div></a> is ONE element. -->
<a href="#" target="_blank" style="border:solid 1px #ccc;background:green;">this is a link
    <!-- <div><input></div> is also ONE element. This means when stopPropagation() is used on this element, all click handler events within this element will not trigger, but <a></a> will -->
  <div style="border: solid 1px #2779aa;">
    <input type="checkbox"/>
  </div>
</a>