單擊子元素時忽略父 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

這個想法是刪除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 2

在此處查看工作演示

我認為您應該使用event.stopPropagation() jquery api，您可以將其用作

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

event.stopPropagation()停止您面臨的事件冒泡。 有關更多文檔，請參閱此處的

希望能幫助到你...

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

將信息類從 div 中取出。 用另一個干凈的 div 包裹它們。

Answer 7

在橙色按鈕單擊處理程序中添加 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!');
}