Question

通过单击任何div.rows（让我们调用此父级），会激活onClick事件，出于演示目的，会弹出一个警告。

在行中，手风琴在＆＃34;信息＆＃34;单击（橙色按钮）（让我们调用这个孩子），但问题是父母警报触发器。

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

我尝试了各种各样的方法，比如使用（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

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

Example code

$(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'));
        }
    });
});

Answer 2

检查工作演示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

希望它有所帮助...

Answer 3

将信息类从div中取出。用另一个干净的div包裹它们。

Answer 4

在橙色按钮中单击处理程序添加return false;最后 - 这将防止将事件冒泡到父母。就像这样：

jQuery('.tickets-more').click(function(){
    // your stuff here
    return false;
});

Answer 5

如果使用css类不打扰你，你可以检查点击的元素属性/类。像这样：

$('.parent-element').on('click',function(e){
if ( $(this).attr('data-toggle') ){//has attribute data-toggle
e.preventDefault();
return false;
}
});

这将取决于你的DOM树多一点。你可以找到一个禁用任何事件的条件

Answer 6

使用css：

 pointer-events: none;

这将使相关元素对鼠标事件完全透明。

Answer 7

我发现这对捕获点击很有效。

onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false;"

Answer 8

如果避免在其中单击元素，则对您有帮助。

function clickhere(obj){
   let theid = obj.id;
   console.log(theid);
   event.stopPropagation();
}

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

8 个答案: