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

请参阅-

通过单击任何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-但为了更好地理解，请参见-

将info类从div中取出。用另一个干净的div将它们包装起来。

在橙色按钮单击处理程序add return false中；最后-这将防止将事件冒泡到父级。就这样,

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

---

其想法是删除

onclick=“

处理程序，将其值保存在另一个字段中，然后在自定义

单击
事件处理程序中执行（评估）值：


如果使用css类不麻烦您，您可以检查单击的元素属性/类。像这样：

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

这将更多地取决于您的DOM树。您可以找到一个将禁用任何事件的条件
检查正在工作的演示

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

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

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

希望它有助于……
使用css：

 pointer-events: none;

这将使相关元素对鼠标事件完全透明。
我发现这对我捕获点击非常有效

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

如果情况是这样的，请避免单击其中的元素，这将对您有所帮助

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

这就是为什么
onclick=”“
是过时的事件处理方式的原因之一…有人有这样的工作示例吗？看看。好的，这很好，非常接近这个例子。。。但是onclick需要保持“内联”，因为它最初的asp.net代码-这里是一个更新的bootply-我添加了jquery，我认为从理论上讲，它应该可以从业余爱好者那里工作！如果所有元素都有不同的
onclick
处理程序，那么您可以使用。
event.stopPropagation（）
将阻止打开信息块：。
return false
将阻止打开信息块：。在
e.preventDefault（）中不需要则返回false
，因为它同时包含
.preventDefault（）
和
.stopPropagation（）
$（this）.attr（'data-toggle'）
可以简化为
$（this）.data（'toggle'）
。再一次：
returnfalse
将阻止打开信息块。是的，但他可能希望能够单击这些子元素。所以他只需要停止播放，因为你最终必须为任何需要互动的孩子启用那些指针事件。
function clickhere(obj){
   let theid = obj.id;
   console.log(theid);
   event.stopPropagation();
}