Question

给出以下html：

<div id="mydiv">
  <a href="#">link</a>
</div>

<div id="target">
  target
</div>

以及以下js：

$('#mydiv').click(function() {
  $('#target').css('background-color', 'blue');
});

如何防止点击链接以触发父div上的点击事件而不影响div上点击的功能？

这是一支显示我的意思的笔：https://codepen.io/davideghz/pen/bWdVWg

Answer 1

您需要在.stopPropagation()事件上致电click以防止它冒泡：

＆＃13;

$('#mydiv a').click(function(e) {
  e.stopPropagation();
});
$('#mydiv').click(function(e) {
  $('#target').css('background-color', 'blue');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
  <a href="#">link</a>
</div>

<div id="target">
  target
</div>

＆＃13;

.stopPropagation()不是jQuery。以下是如何在vanilla中执行上述脚本：

＆＃13;

document.getElementById('mydiv').addEventListener('click',function(e) {
  if (event.target.tagName.toLowerCase() === 'a') {
    e.stopPropagation();
  } else {
    document.getElementById('target').style.backgroundColor = 'blue';
  }
});

＆＃13;

<div id="mydiv">
  <a href="#">link</a>
</div>

<div id="target">
  target
</div>

＆＃13;

单击div中的链接而不触发div.click事件

1 个答案: