javascript - 单击 anchor 子元素时防止重定向

Question

我有一个位于 anchor 中的按钮，该按钮具有一些通过单击触发的逻辑。

问题是，每当我单击该按钮时，应用程序就会由于 anchor 父元素而被重定向。

<a href="foo" id="bar">
  <span id="button">click me</span>
</a>

我尝试使用.stopPropagation()就像this post中提到的那样，但是它不起作用。

我尝试过:

$('#button').on('click', function(e) {
    e.stopPropagation();
})

Here's the fiddle .

但是，如果我用 div 替换父 anchor，那么它就可以工作 - JSFiddle

我做错了什么吗？

更新:我知道我可以使用 e.preventDefault() 阻止重定向，但是，我希望当我单击父元素时进行重定向，以及当我单击在按钮上不重定向并开始执行我的 JS 功能(打开模式)。

Answer 1

试试这个:

$('#bar').on('click', function(e) {
    if( $(e.target).is('#button') ) {
        e.preventDefault();
        //your logic for the button comes here
    }
    //Everything else within the ancho will cause redirection***
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="foo" id="bar">OK
  <span id="button">click me</span>
</a>