Javascript 在没有指针事件的重叠div上禁用鼠标事件

我有一个带有

onClick

事件的

div

，但由于重叠的

div

，它没有检测到鼠标。我不能把它放在第一个下面，所以更改

z-index

不是一个选项

有没有办法在没有指针事件的情况下禁用第二个

div

上的鼠标事件？我需要这是跨浏览器。

索取样品。现在，事件所做的只是发出警报：

<div class="buttonDiv" onClick="buttonAction()"></div>
<div class="filterDiv"></div>

您可以尝试以下方法：

HTML

例如：

基本上，在单击时，您发送单击

事件

，然后您可以使用

event.target查看实际单击了哪个div

在本例中，您会注意到，单击外部会触发警报，而内部不会。
我能找到的唯一解决方案是将鼠标移动事件附加到画布上，并将按钮的坐标与按钮的位置和尺寸进行比较。这是一种痛苦，但至少它起到了作用
你能发布一个HTML示例吗？其实没什么大不了的。这只是一个接一个的div。但我会发布样本，如果它有帮助，但我不能把第二个div放在第一个div里面。我正在测试的这段代码是一个更大程序的一部分，该程序要求它们按我不理解的顺序运行。。你发布的示例中的结束div标记在哪里？我匆忙写的时候忘记添加它们了。固定的it@Catpixels无论
是否嵌套，这似乎都会起作用。div如何重叠？它们是绝对用z索引定位的还是什么？
<div class="buttonDiv" onClick="buttonAction(event)">
  OUTER
  <div class="filterDiv">INNER</div>
</div>

var buttonAction = function(e) {
  if(e.target.className == "buttonDiv") {
    //code here
    alert('got here');
  }
}