已解決430363個問題，去搜搜看，總會有你想問的

當單擊子錨時，如何防止父級單擊事件觸發？

首頁猿問當單擊子錨時，如何防止父級單擊事件觸發？

當單擊子錨時，如何防止父級單擊事件觸發？

JavaScript JQuery

嗶嗶one 2019-06-19 17:34:01

當單擊子錨時，如何防止父級單擊事件觸發？我目前正在使用jQuery使div可點擊，在這個div中我也有錨。我遇到的問題是，當我單擊一個錨時，兩個單擊事件都會觸發(對于div和錨)。當單擊錨時，如何防止div的onClick事件觸發？這是破譯的代碼：JavaScriptvar url = $("#clickable a").attr("href");$("#clickable").click(function() { window.location = url; return true;})HTML<div id="clickable">  <a href="http://foo.com">I don't want #clickable to handle this click event.</a></div>

查看完整描述

3 回答

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

事件冒泡到DOM中附加單擊事件的最高點。因此，在您的示例中，即使您在div中沒有任何其他顯式可單擊元素，div的每個子元素都會將它們的Click事件泡到DOM上，直到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;});

您還可以將一個單擊事件處理程序附加到您的鏈接上，這些鏈接告訴它們停止事件冒泡在它們自己的處理程序執行之后：

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

反對回復 2019-06-19

楊__羊羊

TA貢獻1943條經驗獲得超7個贊

使用停止傳播方法，請參見示例：

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

正如jQueryDocs所說：

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

請記住，它沒有阻止其他偵聽器處理此事件(前。一個按鈕的多個單擊處理程序)，如果它不是所期望的效果，則必須使用stopImmediatePropagation相反。

反對回復 2019-06-19

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

這里是我的解決方案，每個人都在尋找非jQuery代碼(純javascript)。

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

如果單擊父級的子類，則不會執行您的代碼

反對回復 2019-06-19

3 回答
0 關注
617 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

當單擊子錨時，如何防止父級單擊事件觸發？

當單擊子錨時，如何防止父級單擊事件觸發？

3 回答

添加回答

當單擊子錨時，如何防止父級單擊事件觸發？