Question

我有一个div，里面有<a href>。单击div时，我想显示一个弹出窗口，但是单击锚点时，我想显示另一个模态。

 <div data-toggle="modal" data-target="#firstmodal">
  <div>
   other stuff
  </div>
  <a href="" class="anch" data-toggle="modal" data-target="#other">
  <i class="fa fa-pencil"></i>
  </a>
</div>

我尝试将position:absolute; z-index:100赋予锚标记，但没有用。单击它仍会同时打开模态

.anch{
  position:absolute:
  z-index:100;
}

Answer 1

您要查找的术语是事件的“传播”，沿元素层次进行。

您可能需要Event.preventDefault或其他methods to deal with event propagation之一。

Answer 2

您可以在链接点击事件处理函数中使用Event.stopPropagation()，以防止当前事件在捕获和冒泡阶段中进一步传播：

document.querySelector('[data-toggle=modal]').addEventListener('click', function(e){
  alert('You have clicked div');
});

document.querySelector('a').addEventListener('click', function(e){
  e.stopPropagation();
  alert('You have clicked link');
});

<div data-toggle="modal" data-target="#firstmodal">
  <div>
   other stuff
  </div>
  <a href="" class="anch" data-toggle="modal" data-target="#other">
  <i class="fa fa-pencil"></i>Test link
  </a>
</div>

当孩子被点击时如何防止父div的点击

2 个答案: