单击子元素时忽略父级 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>

以上是要点 - 但请参阅以更好地理解 - 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'));
        }
    });
});

Answer 3

如果情况是避免点击其中的元素，这会对您有所帮助。

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

Answer 4

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

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

这更多地取决于你的 DOM 树。您可以找到一个条件来禁用任何事件

Answer 5

使用CSS：

 pointer-events: none;

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

Answer 6

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

Answer 7

在橙色按钮中点击handler添加return false；最后 - 这将防止将事件冒泡到父级。就像这样：

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

Answer 8

我发现这对我来说可以捕捉点击声。

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

Answer 9

简单的解决方案：

这在许多情况下都适用，例如模态背景。如果单击任何子组件，它不会在父组件上触发：

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

function handleClick(ev) {
  if (ev.target === ev.currentTarget) alert('Hello World!');
}

Answer 10

使用

event.stopPropagation()

功能。

stopPropagation()

接口的

Event方法可以防止当前事件在捕获和冒泡阶段进一步传播。然而，它并不能阻止任何默认行为的发生；例如，仍然会处理链接的点击。如果您想停止这些行为，请参阅

preventDefault()

方法。它也不会阻止传播到当前元素的其他事件处理程序。如果您想停止这些，请参阅

stopImmediatePropagation()

。

MDN 文档

const clickToParentElement = (e) => console.log("click to parent")

const clickToElement = (e) => {
  console.log("click to current")
}

const clickToElementWithoutParent = (e) => {
  e.stopPropagation() // disable parent events
  clickToElement(e)
}

<div onclick="clickToParentElement(event)">
  Click Here (Parent)
  <div onclick="clickToElement(event)">
    Click Here (Current)
  </div>
</div>

<div onclick="clickToParentElement(event)">
  Click Here (Parent)
  <div onclick="clickToElementWithoutParent(event)">
    Click Here (Current) Without Parent Event
  </div>
</div>