javascript - 将鼠标事件分派(dispatch)到视觉上为 "behind"的接收元素

Question

在我的网页上，我有两个 div，A 和 B:

DOM 如下所示(简化)。这里要注意的主要事情是，div 在 DOM 层次结构中处于同一级别，并且它们不按任何顺序排列。另外，外层的div不仅包含A和B，还有更多的div C、D、E等。B不一定被A重叠，也可能是C，在A后面。

<div>
    <div style="...">B</div>
    <div style="...">A</div>
</div>

单击处理程序附加到外部 div，在冒泡阶段捕获 A 或 B 上的鼠标单击事件。单击 A 和 B 的交叉点将导致 A 上的单击事件冒泡到我现在触发的单击处理程序。

现在的问题是:在某些情况下，处理程序决定事件不应由 A 处理而应属于 B。如果事件应由 B 处理，将触发相同的点击处理程序，但事件对象 currentTarget 属性将是 B 而不是 A。

我怎样才能做到这一点？

我已经看过 css3 pointer-handler 和 JS 中的一些事件调度方法，但在这里无法真正提出解决方案。

可能的解决方案 1(不跨浏览器兼容)？:

我想我可以使用 pointer-events css3 property .如果处理程序决定该事件应由 B 处理，它会将指针事件设置为无。然后，它会重新触发鼠标单击。 这里的问题:是否可以仅使用坐标重新触发鼠标单击，而不指定特定元素？

无论如何，指针事件的支持是有限的:http://caniuse.com/pointer-events

Answer 1

您可以尝试将事件传递给 B(使用 jQuery):

(伪代码)

var $A = $('#A'), $B = $('#B');

$B.on('click', function () {
  console.log('B clicked');   
});

$('#outer').on('click', function (evt) {
    if (Math.random() < 0.1) { // << pseudo condition
        $B.trigger(evt);
    }
});​

http://jsfiddle.net/hzErh/

---

更新:

使用这样的函数:

// this function should (did not enough testing) return all elements at a given
// point in the order of top to bottom.
var elementsFromPoint = function (x, y, root) {
  var buffer = [], result = [], el, i = 0, lim;

  while ((el = document.elementFromPoint(x, y)) && [root, document.body, document.body.parentNode].indexOf(el) < 0) {
    result.push(el);
    buffer.push({el: el, visibility: el.style.visibility});
    el.style.visibility = 'hidden';
  }

  for (lim = buffer.length; i < lim; i += 1) {
    buffer[i].el.style.visibility = buffer[i].visibility;
  }

  return result;
};

您可以获得给定 x/y 坐标的元素。它有点老套，但需要更多测试。

$('#outer').on('click', function (evt) {
  var elements = elementsFromPoint(
    evt.pageX + $(this).offset().left,
    evt.pageY + $(this).offset().top,
    this
  );

  console.log(elements);
});

演示:http://jsfiddle.net/hzErh/1/

---

更新 2:此版本应该为许多元素提供更好的性能:

// this function should (did not enough testing) return all elements at a given
// point, though the order is not representative for the visible order.
var elementsFromPoint = function (root, x, y) {
  var result = [], i = 0, lim = root.childNodes.length, bb;

  for (; i < lim; i += 1) {
    bb = root.childNodes[i].getBoundingClientRect();
    if (bb.left <= x && x <= bb.right && bb.top <= y && y <= bb.bottom) {
      result.push(root.childNodes[i]);
    }
  }

  return result;
};

演示:http://jsfiddle.net/CTdZp/2/