捕获两个重叠元素上的鼠标悬停事件

所以我有一个 d3 图表rect覆盖以固定十字准线元素mouseover事件。在覆盖层下，我有其他显示数据的矩形mouseover事件处理程序也是如此，但是覆盖层被阻塞mouseover事件在下面的子矩形上形成触发器。

let chartWindow = svg
  .append("g");

/* this holds axis groups, and cadlestick group*/
let candleStickWindow = chartWindow.append("g")
  //this event never fires
  .on('mousemove', ()=>console.log('mouse move'));

let candlesCrosshairWindow = chartWindow
  .append("rect")
  .attr("class", "overlay")

  .attr("height", innerHeight)
  .attr("width", innerWidth)
  .on("mouseover", function() {
    crosshair.style("display", null);
  })
  .on("mouseout", function() {
    crosshair.style("display", "none");
    removeAllAxisAnnotations();
  })
  .on("mousemove", mousemove);

The CrosshairWindow具有 CSS 属性pointer-events: all。如果我删除它，我的事件就会在candleStickWindow但不是CrosshairWindow。如何将鼠标事件获取到这两个元素上？

谢谢你的帮助！

Update我将十字线矩形元素更改为位于底部，它有点起作用，烛台条形鼠标悬停事件起作用，但它阻止了十字线工作。

我想到的一种解决方案可能会使用事件冒泡 https://javascript.info/bubbling-and-capturing然而，只有当事件可以沿着同一个 DOM 子树冒泡时，这才有效。如果在您的 DOM 结构中，十字准线矩形和其他元素不共享您可以使用的共同祖先合理地附加这样的侦听器，您需要重新考虑您的 DOM 或诉诸其他解决方案。对于这个答案，我将提出一种更普遍适用的替代方法。

您可以将全尺寸的rect在你的 SVG 的最底部并有它的pointer-events set to all。这样您就可以轻松附加一个mousemove处理程序来控制十字准线在整个视口中的移动。然而，正如您自己所注意到的，如果上面的元素附加了针对特定事件类型的侦听器，则此方法不起作用。因为在这种情况下，一旦事件到达其目标，就无法将其进一步传播到底层矩形来处理十字准线组件。不过，解决方法很简单，因为您可以克隆事件并将新事件直接分派到您的矩形。

克隆事件是通过使用MouseEvent() https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent构造函数传入事件的详细信息d3.event参考：

new MouseEvent(d3.event.type, d3.event)

然后，您可以将新创建​​的事件对象分派到十字准线rect元素通过使用.dispatchEvent() https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent的方法EventTarget https://developer.mozilla.org/en-US/docs/Web/API/EventTarget接口是由SVGRectElement https://developer.mozilla.org/en-US/docs/Web/API/SVGRectElement:

.dispatchEvent(new MouseEvent(d3.event.type, d3.event));

由于您的问题中缺乏完整的示例，我自己设置了一个工作演示来说明该方法。您可以拖动蓝色圆圈，这是十字准线组件的精简版本。请注意，即使在橙色矩形下方，圆也可以无缝移动。为了演示附加到这些小矩形的事件处理程序，当使用鼠标指针进入或离开它们时，它们将转换为绿色并返回橙色。

const width = 500;
const height = 500;
const radius = 10;
const orange = d3.hsl("orange");
const steelblue = d3.hsl("steelblue");
const limegreen = d3.hsl("limegreen");

const svg = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height);
    
const target = svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .on("mousemove", () => {
      circle.attr("cx", d3.event.clientX - radius);
      circle.attr("cy", d3.event.clientY - radius);
    });

const circle = svg.append("circle")
    .attr("r", radius)
    .attr("fill", steelblue)
    .attr("pointer-events", "none");
    
const rect = svg.selectAll(null)
  .data(d3.range(3).map(d => [Math.random() * width, Math.random() * height]))
  .enter().append("rect")
    .attr("x", d => d[0])
    .attr("y", d => d[1])
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", orange)
    .attr("opacity", 0.5)
    .on("mouseover", function() { 
      d3.select(this).transition().attr("fill", limegreen);
    })
    .on("mousemove", function() { 
      target.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
    })
    .on("mouseout", function() { 
      d3.select(this).transition().attr("fill", orange);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>