单击锚点子元素时防止重定向

Question

我有一个位于锚点中的按钮，该按钮具有一些由clicking触发的逻辑。

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

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

我尝试使用.stopPropagation((，就像这篇文章中提到的那样，但它不起作用。

我试过了：

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

这是小提琴。

但是，如果我用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>

Answer 2

尝试：

e.preventDefault();

小提琴：http://jsfiddle.net/hfyy10a8/3/

Answer 3

你应该

在链接上使用e.preventDefault();：

$('#bar').on('click', function(e) {
    e.preventDefault();
});

您也可以将其一起添加到您的示例中：

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

Answer 4

使用 return false ：

$('#button').on('click', function (e) {
    //some logic
    $(this).css('color', 'red');
    return false;
});

stopPropagation 不起作用的原因是因为它会阻止事件处理程序运行，而不是本机行为。

Answer 5

尝试改用e.preventDefault()：

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

请参阅此解释以了解e.stopPropagation()不起作用的原因。

Answer 6

我知道

这个问题已经有了答案，但是，我通过returning false on the "onclick" attribute of the child element让我的工作。

<a href="https://google.com">
    <button onclick="return doTask()">Do not navigate</button>
</a>
function doTask(){
  //... write action
  return false; <- This prevents the click action from bubbling up to parent tag
}