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

具有 onclick 事件的重叠元素

Overlapped elements with onclick event

javascript

css

onclick

overlap

overlapping