javascript - 如何将点击传播到光标下的所有 div？

Question

我有一堆 div 绝对位于彼此之上。当我将点击事件绑定(bind)到所有这些时，只有顶部 div 响应。如何将事件发送到光标下的所有 div？

Answer 1

根据 FelixKling 的建议使用 document.elementFromPoint() 和 Amberlamps 的 fiddle ，并使用 jQuery 进行 DOM 交互，我最终得到了以下结果:

$divs = $("div").on('click.passThrough', function (e, ee) {
  var $el = $(this).hide();
  try {
    console.log($el.text());//or console.log(...) or whatever
    ee = ee || {
      pageX: e.pageX,
      pageY: e.pageY
    };
    var next = document.elementFromPoint(ee.pageX, ee.pageY);
    next = (next.nodeType == 3) ? next.parentNode : next //Opera
    $(next).trigger('click.passThrough', ee);
  } catch (err) {
      console.log("click.passThrough failed: " + err.message);
  } finally {
    $el.show();
  }
});

DEMO

try/catch/finally 用于确保元素再次显示，即使发生错误也是如此。

两种机制允许点击事件通过或不通过:

• 仅将处理程序附加到选定元素(标准 jQuery)。
• 命名点击事件，click.passThrough 类似于 event.stopPropagation()。

单独或组合使用，这些机制在控制“passThrough”行为的附加和传播方面提供了一定的灵 active 。例如，在 DEMO 中，尝试从“b”元素中删除类 p，然后查看传播行为发生了怎样的变化。

就目前而言，需要编辑代码以获得不同的应用程序级行为。一个更通用的解决方案是:

• 允许以编程方式附加特定于应用的行为
• 允许以编程方式抑制“passThrough”传播，类似于 event.stopPropagation()。

这两个目标都可以通过在 jQuery 中建立一个具有底层“passThrough”行为的 clickPassthrough 事件来实现，但是要实现这一点还需要做更多的工作。也许有人想试一试。