当子元素被点击时忽略父元素的onClick事件

Question

请见 - http://www.bootply.com/dR7fxjP1bk 点击任何一个div.rows（我们称之为父元素）会触发onClick事件，为了演示目的，会弹出一个警示框。

在该行中，当点击“info”（橙色按钮）时，手风琴会折叠（我们称之为子元素），但问题是父元素的警报被触发。

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

我已经尝试过使用(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

- Tom Rudge

---

有人有这个的工作实例吗？ - Tom Rudge

请查看更新的代码。 - Regent

好的，非常接近了...但是onclick需要保持“内联”，因为它最初是asp.net代码 - 这里是更新的bootply - http://www.bootply.com/mm4xEf5kXW 我添加了jQuery，理论上应该可以从一个业余爱好者那里工作！ - Tom Rudge

如果你无法从ASP.NET代码中删除老式的onclick = ""，你可以使用jQuery将其关闭，就像这个代码版本一样。 - Regent

如果所有元素都有不同的 onclick 处理程序，则可以使用 此版本。 - Regent

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() 阻止事件冒泡，即停止当前事件的传播。更多文档请参考这里

希望能对您有所帮助...

- Mayank

---

event.stopPropagation()将阻止信息块的打开：示例。 - Regent

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

- Regent

Answer 3

如果避免在其中点击元素，这将有所帮助。

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

- jovany cruz

Answer 4

使用CSS：

 pointer-events: none;

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

- Konstantin XFlash Stratigenas

---

是的，但他可能希望能够点击这些子元素。所以他只需要停止事件传播，因为最终你必须为需要交互性的任何子元素启用指针事件。 - keepitreal

Answer 5

如果您不介意使用CSS类，您可以检查已点击元素的属性/类。就像这样：

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

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

- Beri

---

如果使用return false，则不需要e.preventDefault();，因为它包含了.preventDefault()和.stopPropagation()。$(this).attr('data-toggle')可以简化为$(this).data('toggle')。再次强调：return false将防止信息块打开。 - Regent

Answer 6

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

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

- MeSo2

Answer 7

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

- jollarvia

Answer 8

简单解决方案：

这在许多情况下都可以使用，例如用于模态背景。如果单击任何子组件，则不会触发父组件：

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

- Gregory

Answer 9

在橙色按钮的点击处理程序中添加return false;以防止事件冒泡到父级。就像这样：

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

- dmikam

---

return false 将阻止信息块的打开：示例。 - Regent