javascript - 在 div 上的 anchor 标记内单击时停止单击事件传播

Question

描述:

我有以下 HTML

<a href = "go some where">

<div onclick = "myfunc1(....)">CLICK ME A</div>

<div onclick = "myfunc2(....)">CLICK ME B</div>

</a>

现在，当我单击第一个 div 时， anchor 标记会被触发，第二个 div 也是如此。我希望能够单击 anchor 标记内的任何 div，它应该只调用分配给它的函数...

当且仅当我不点击任何 div 但整个其他区域 anchor 标记有那么它应该带我到页面 href 有...

我尝试过什么:

$(".add_this_person").on("click", "a", function (e) {
    e.preventDefault();
} ); // where add_this_person is a class of both divs

Answer 1

你可以试试这个:-
将 class 添加到两个 div 并更改 jQuery 代码，如下所示:-

$(".add_this_person").on("click", "a", function (e) {
  e.preventDefault();
  if($(e.target).is('.first'))
  {
     alert("A");
  }else if($(e.target).is('.second'))
  {
    alert("B");
  }else{
    window.location=$(this).attr('href');
  }
 }); 

Demo