带有onlick事件的重叠元素

Question

这是交易：

黑暗方块附有onlick事件 红色方块与黑色方块重叠，也有自己的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>