javascript - 单击子元素时忽略父 onClick 事件

Question

请参阅 - http://www.bootply.com/dR7fxjP1bk

通过单击任何一个 div.rows(我们称其为父级)，将激活一个 onClick 事件，出于演示目的，会弹出一个警报。

在点击“信息”(橙色按钮)时，该行内的 Accordion 折叠(让我们调用这个 child )，但问题是 parent 警报触发。

我需要信息按钮不触发警报，只有在点击其他任何地方时才会出现警报。

我已经尝试过各种方法，例如使用 (e)stopPropagation .on .off 调用等...我不是最好的 jquery 专家，所以需要一点帮助让它工作 - 并帮助我学习一些东西!

<div class="row ticket-selector" onclick="alert('Hello World!');">
    <a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a>
</div>

上面是要点 - 但为了更好地理解，请参阅 - http://www.bootply.com/dR7fxjP1bk

Answer 1

检查工作演示 HERE

我认为您应该使用event.stopPropagation() jquery api，您可以将其用作

$(document).ready(function(){
    $('.tickets-more').click(function(event){
        // your stuff here
        alert("Alert On Click");
        event.stopPropagation();
    });
});

event.stopPropagation() 停止您面临的事件冒泡。有关更多文档，请参阅 HERE

希望对你有帮助