Question

stopPropagation有效但无法阻止href在子单击时执行，有没有办法让父锚不执行它的href on child元素被点击（stopPropagation / bubbling）？

这是我的标记：

<div id="parent">
  <h5>Parent</h5>
  <a id="childAnchor" href="https://www.google.com/" target="_blank">
    <h5>Child anchor tag</h5>

    <div id="grandChildAnchor">
      <h5>Grand Child div tag</h5>
    </div>
  </a>
</div>

这是jsfiddle，我在锚点击时重定向：https://jsfiddle.net/gchc9Ldb/

这是stackoverflow代码段，但重定向（target =“_ blank”）没有正确发生。所以请检查上面的jsfiddle链接，而不是下面的代码片段。

$('#parent').click(function() {
  console.log('#parent clicked');
})

$('#parent a').click(function() {
  console.log('#parent > anchor clicked');
})

$('#parent a div').click(function(e) {
  e.stopPropagation();
  console.log('#parent > anchor > clicked');
})

h5 {
  text-align: center;
  color: white;
  margin: 0;
}

#parent {
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: green
}

a {
  display: block;
  padding: 50px 10px;
  background-color: blue
}

#grandChildAnchor {
  padding: 25px 0;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
  <h5>Parent</h5>
  <a id="childAnchor" href="https://www.google.com/" target="_blank">
    <h5>Child anchor tag</h5>
    
    <div id="grandChildAnchor">
      <h5>Grand Child div tag</h5>
    </div>
  </a>
</div>

修改我不想在我的锚标记的href上运行return false，我仍然需要href才能工作，但是当点击锚标记的子项时则不需要。 e.stopPropagation对我不起作用。因此，大多数人认为这不是一个重复的问题。

Answer 1

您需要使用e.preventDefault();

$('#parent a div').click(function(e) {
  e.preventDefault();
  console.log('#parent > anchor > clicked');
})

e.stopPropagation()阻止事件冒泡事件链。

e.preventDefault()会阻止浏览器对该事件进行的默认操作

以下是JSFIDDLE

的工作链接

如何制作href listen stopPropagation

1 个答案: