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