如何防止父母的onclick事件在點擊子錨時觸發？

Question

我目前正在使用jQuery使div可點擊，並在這個div我也有錨點。我遇到的問題是，當我點擊一個錨點時，兩個點擊事件都會觸發（對於div和錨點）。如何防止單擊錨點時觸發div的onclick事件？

這裏是斷碼：

的JavaScript

var url = $("#clickable a").attr("href"); 

$("#clickable").click(function() { 
    window.location = url; 
    return true; 
}) 

HTML

<div id="clickable"> 
    <!-- Other content. --> 
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a> 
</div> 

Answer 1

活動泡沫在其中一個點擊事件已附加了DOM的最高點。因此，在您的示例中，即使您在div中沒有​​任何其他可顯式單擊的元素，div的每個子元素都會將其單擊事件向上鼓起，直到DIV的click事件處理程序捕獲它爲止。

有兩個解決方案是檢查誰確實發起了事件。 jQuery的傳遞一個EventArgs對象隨着事件：

$("#clickable").click(function(e) { 
    var senderElement = e.target; 
    // check if sender is the DIV element e.g. 
    // if($(e.target).is("div")) { 
    window.location = url; 
    return true; 
}); 

您還可以將一個click事件處理程序，以你的鏈接，告訴他們stop event bubbling自己的處理程序後，執行：

$("#clickable a").click(function(e) { 
    //do something 
    e.stopPropagation(); 
}) 

Answer 2

使用stopPropagation方法，看一個例子：

$("#clickable a").click(function(e) { 
    e.stopPropagation(); 
}); 

如jQuery的文檔說：

stopPropagation方法阻止事件向上冒泡的DOM樹 ，防止任何父處理程序從被通知的事件。

請記住，它不防止他人偵聽器來處理該事件（例如，一個按鈕的點擊多次處理程序），如果不是預期的效果，必須使用stopImmediatePropagation代替。

Answer 3

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a> 

Answer 4

添加a如下：

<a href="http://foo.com" onclick="return false;">....</a> 

或單擊處理return false;爲#clickable，如：

$("#clickable").click(function() { 
     var url = $("#clickable a").attr("href"); 
     window.location = url; 
     return false; 
    }); 

Answer 5

您需要停止事件到達（冒泡）父（div）。 查看關於冒泡的部分here以及jQuery特定的API信息here。

Answer 6

所有的解決方案都很複雜，而且是jscript。這是最簡單的版本：

var IsChildWindow=false; 

function ParentClick() 
{ 
    if(IsChildWindow==true) 
    { 
     IsChildWindow==false; 
     return; 
    } 
    //do ur work here 
} 


function ChildClick() 
{ 
    IsChildWindow=true; 
    //Do ur work here  
} 

Answer 7

如果您在點擊DIV多個元素，你應該這樣做：

$('#clickable *').click(function(e){ e.stopPropagation(); }); 

Answer 8

要指定一些子元素作爲不可點擊寫CSS層次結構中的示例下面。

在這個例子中，我停止傳播任何元素（*）內TD內TR表內與類「.subtable」

$(document).ready(function() 
{  
    $(".subtable tr td *").click(function (event) 
    { 
     event.stopPropagation(); 
    }); 

}); 

Answer 9

這裏我給大家在那裏尋找一個非jQuery的解決方案代碼（純JavaScript）

document.getElementById("clickable").addEventListener("click", function(e){ 
    e = window.event || e; 
    if(this === e.target) { 
     // put your code here 
    } 
}); 

您的代碼不會被執行，如果點擊了父母的孩子的

Answer 10

使用return false;或e.stopPropogation();不會讓福進一步執行的代碼。它會在這一點停止流動。

Answer 11

你也可以試試這個

$("#clickable").click(function(event) { 
    var senderElementName = event.target.tagName.toLowerCase(); 
    if(senderElementName === 'div') 
    { 
     // do something here 
    } 
    else 
    { 
     //do something with <a> tag 
    } 
}); 

Answer 12

寫作如果有人需要（爲我工作）：

event.stopImmediatePropagation() 

從this解決方案。

Answer 13

如果您不打算在任何情況下與內部元素進行交互，那麼CSS解決方案可能對您有用。

內部元件/ S正好被設置爲pointer-events: none

你的情況：

.clickable > a { 
    pointer-events: none; 
} 

或一般地針對所有的內部元素：

.clickable * { 
    pointer-events: none; 
} 

這很容易破解救了我很多用ReactJS開發的時間

瀏覽器支持牛逼可以在這裏找到：http://caniuse.com/#feat=pointer-events

Answer 14

下面是使用一個例子角2+

例如，如果你想，如果用戶點擊它外面關閉一個模態分量：

// Close the modal if the document is clicked. 

@HostListener('document:click', ['$event']) 
public onDocumentClick(event: MouseEvent): void { 
    this.closeModal(); 
} 

// Don't close the modal if the modal itself is clicked. 

@HostListener('click', ['$event']) 
public onClick(event: MouseEvent): void { 
    event.stopPropagation(); 
}