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

Question

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

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

请求的样本。现在所有活动都会发出警报：

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

Answer 1

你可以试试这个：

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');
  }
}

示例：http://jsfiddle.net/aFRcd/1/

基本上在点击后，您会发送点击event，然后您可以使用event.target

查看实际点击了哪个div

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

Answer 2

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