Question

我有div结构。

<div id="parentDiv">
    Employee Data
   <a>Click Here</a>
</div>

父div的点击事件已经准备好由第三方插件注册，它不能控制我。它在div点击上做了一些验证。

我想点击锚标记“点击这里”执行一些操作，但不想执行验证，注册div点击。

但是当用户点击“员工数据”时，它应该执行已注册点击事件的验证。

我试过

<a onclick="(arguments[0]||window.event).stopPropagation();">Click Here</a>
<a onclick="(arguments[0]||window.event).cancelBubble=true;"></a>

但它取消了他自己的点击事件，即锚标签点击事件。

Answer 1

stopPropagation()正是您所需要的，但您需要直接在引发的click事件上调用它。您可以使用jQuery执行此操作，如下所示：

＆＃13;

$('#parentDiv').click(function() {
  console.log('parent clicked');
})

$('#parentDiv a').click(function(e) {
  e.stopPropagation();
  console.log('child clicked');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentDiv">
  Employee Data
  <a href="#">Click Here</a>
</div>

＆＃13;

或者，你可以像这样使用本机JS：

＆＃13;

document.querySelector('#parentDiv').addEventListener('click', function() {
  console.log('parent clicked');
})

document.querySelector('#parentDiv a').addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('child clicked');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentDiv">
  Employee Data
  <a href="#">Click Here</a>
</div>

＆＃13;

仅取消父元素的单击事件

1 个答案: