帶有onclick-handler的元素之上的鏈接

Question

嘿。我有一個愚蠢的，但討厭的問題。

如果我有這個（簡體）情況：

<div onclick="doSomething(); return false;"> 
    lorem ipsum <a href="somewhere.html">dolor sit</a> amet 
</div> 

...是否有任何（方便）的方式來防止父DIV的onclick處理程序從鏈接被點擊時觸發。

在我的場景中，我有一個很大的包裝div，它與一個onclick處理程序構成一個「鏈接」，但我想覆蓋一些帶有鏈接的文本數據，但至少在Firefox當我點擊文本中的鏈接時，首先執行父級的onclick。

Answer 1

您可以通過在處理程序中測試事件的原始目標來解決此問題。沿線的東西：

function doSomething (e) { 
    // get event object and target element 
    var e = e || window.event; 
    var target = e.srcElement || e.target; 
    // is target a div? 
    if (target && /^div$/i.test(target.nodeName)) { 

    // do your magic in here ... 

    } 
} 

Answer 2

恕我直言，這是一個錯誤的HTML /行爲嵌套。要麼整個​​div是可點擊的1個元素，或者鏈接是，但不是兩個都是......除非你「取消」嵌套它們。

Answer 3

使用jQuery，您可以爲每個錨點添加一個點擊處理程序，並使用event.stopPropagation()來防止事件冒泡到DIV。

$('div#wrapperDiv > a').click(function(event) { 
     event.stopPropagation(); 
    });