如何檢測是否在DIV內部單擊了特定的類鏈接並覆蓋DIV的點擊操作？

我有以下類型的幾個DIV我的網頁上：如何檢測是否在DIV內部單擊了特定的類鏈接並覆蓋DIV的點擊操作？

<div class='entry'> 
    This is a statement 
    <a title="Search @travel" class="app-context-link" href="">@travel</a> 
</div>

當類.entry的DIV點擊我觸發以下：

$(".entry").on('click', function(e) { 
    console.log("DIV Clicked"); 
});

當類的.app的鏈接-context鏈接被點擊我觸發以下：

var context_links = document.getElementsByClassName('app-context-link'); 

for (var k=0;k<context_links.length;++k) { 
    context_links[k].addEventListener('click', function(e) { 
     console.log("The context link inside DIV is clicked"); 
    }); 
}

問題：

現在，當我點擊應用程序上下文鏈接時，這兩個操作似乎都被觸發：DIV（因爲檢測到.click事件）和鏈接（因爲該類的鏈接上有一個事件偵聽器）。

我該如何做到這一點，如果鏈接被點擊的DIV點擊jQuery沒有觸發？

我嘗試了幾種可能性，沒有任何工作。另外，我不希望重新組織代碼太多，只需在點擊jQuery部分中添加一些指令，以便檢測鏈接是否被點擊，並且不會執行通常在點擊DIV時執行的操作。

謝謝！

來源

2014-03-05 Dmitry Paranyushkin

？（'click'，'.app-context-link'，function（e）{...}）;使用$（'。entry'）。這會爲你的'.entry'添加一個委託處理程序，它將處理div中所有'.app-context-link'的點擊，而不是爲每個鏈接添加1個處理程序。 – Dogoku

使用停止傳播：

context_links[k].addEventListener('click', function(e) { 
    e.stopPropagation(); //Here 
    console.log("The context link inside DIV is clicked"); 
});

這將冒泡停止單擊事件，所以當你點擊a，單擊其祖先的事件將不會觸發。

來源

2014-03-05 14:22:48

你可以因爲你使用jQuery，你爲什麼不使用它爲你的鏈接事件處理程序也使用這樣

$(".entry").on('click', function(e) { 
e.stopPropagation(); 
alert($(this).prop("tagName")); 
}); 
$(".entry a").on('click', function(e) { 
e.preventDefault(); 
e.stopPropagation(); 
alert($(this).prop("tagName")); 
});

DEMO

來源

2014-03-05 14:23:36

如何檢測是否在DIV內部單擊了特定的類鏈接並覆蓋DIV的點擊操作？

回答

相關問題