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

Question

我有一个divwithonClick事件，但由于重叠，它没有检测到鼠标div。我不能把它放在^第一个下面，所以改变z-index它不是一种选择。

有没有办法在没有指针事件的情况下禁用 2 ^nd div的鼠标事件？我需要这个是跨浏览器的。

要求的样品。现在所有事件都会触发警报：

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

score 1 · Accepted Answer

你可以试试这个：

HTML

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

Javascript

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

基本上在点击时，您发送点击event，然后您可以查看实际点击了哪个 divevent.target

您会注意到在示例中单击 OUTER 会触发警报，而 INNER 不会。

score 0 · Accepted Answer

我能找到的唯一解决方案是将鼠标移动事件附加到画布并将按钮的坐标与按钮的位置和尺寸进行比较。这是一种痛苦，但至少它完成了工作

2 回答 2