单击Child元素时忽略Parent onClick事件

Question

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

通过单击任何div.rows(让我们调用此父项),将激活onClick事件,出于演示目的,将弹出警报.

在行中,当点击"信息"(橙色按钮)时,手风琴会折叠(让我们调用这个孩子),但问题是父母警告触发器.

我需要信息按钮才能触发警报,只有在点击其他任何地方时才会显示警报.

我尝试了各种各样的方法,例如使用(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>

以上是jist - 但是为了更好地理解 - http://www.bootply.com/dR7fxjP1bk

Answer 1

在这里查看工作演示

我认为你应该使用event.stopPropagation() jquery api 并且你可以将其用作

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

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

希望能帮助到你...

Answer 2

这个想法是删除onclick=""处理程序将其值保存在另一个字段中，然后在自定义click事件处理程序中执行（评估）值：

示例代码。

$(document).ready(function()
{
    var elements = $(".ticket-selector");
    elements.each(function()
    {
        var handler = $(this).attr('onclick');
        $(this).data('click', handler);
    });
    elements.attr('onclick', '');
    elements.click(function(e)
    {
        if (!$(e.target).hasClass("info-sign"))
        {
            eval($(this).data('click'));
        }
    });
});