具有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

TIP：为简单起见，我想保留Javascript语法在黑色方块上添加onclick事件，在红色方块上添加内联语法。

Answer 1

您可以通过stopPropagation内联完成此操作。

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