與 onclick 事件重疊的元素

Question

這是交易：

黑色方塊附加了一個onclick事件
與黑色方塊重疊的紅色方塊也有自己的onclick事件。

當我點擊紅色方塊時，我只想觸發紅色方塊的onclick事件。
當我點擊暗方塊時，我只想觸發暗方塊的onclick事件。

目前，兩者都被解雇了，這對我來說是個問題。

我怎樣才能實現我的目標？

一段代碼：

$('#dark-square').loadData({
    //load some HTML template with red square element inside
    //Red square looks like :
    //<div id="red-square" onclick="myFunction()">Some plain text</div>
}).click(function() {
    //what to do when dark-square only is clicked
})

#red-square {
    position: absolute !important;
    top: 9px !important;
    right: 16px !important;
    z-index: 1000 !important; //I tried that to force the element to be on the top, but no result on onclick
}

//#dark-square is just a div with width / height

提示：為簡單起見，我想保留 Javascript 語法以在黑色方塊上添加我的onclick事件，並在紅色方塊上添加內聯語法。

Answer 1

您可以使用stopPropagation內聯執行此操作。

<div onclick="alert('Red Square Clicked'); event.stopPropagation();">I am the red square</div>