将进入/退出事件限制为仅d3.js中的背景div

Question

当光标移动到包含SVG的特定DIV上时，我想显示带坐标的移动十字线。

在mouseenter我可以成功创建一个显示坐标的rect （并在mouseout上删除它），但是，将光标移动到新创建的rect或文本本身会触发mouseout mouseenter事件循环。

我在几个地方尝试过d3.event.stopPropagation() ，但似乎都没有。

图片显示您是否小心地将鼠标移动到灰色的“屏幕”上 - 创建了矩形和文本并保留在一个位置。

但是如果你将光标移动到触摸“bobo”或绿色矩形，它就会开始移动。

var infoBox = null;

var theSVG = d3.select("#theScreen")
  .append("svg")
  .attr("width", 250)
  .attr("height", 250);

// Register mouse events
theSVG
  .on("mouseenter", mouseEnter)
  .on("mouseout",   mouseExit);

function mouseEnter()
{
    if (infoBox !== null)
      return;

  var coord = d3.mouse(d3.event.currentTarget);
  x1 = parseInt(coord[0]);
  y1 = parseInt(coord[1]);

  console.log("mouseEnter", x1, y1, infoBox);

  infoBox = theSVG.append("g")
    .attr('class', 'ssInfoBox');

  var rectItem = infoBox.append("rect")
  .attr('x', x1)
  .attr('y', y1)
  .attr('width',  30)
  .attr('height', 20);

  var textItem = infoBox.append("text")
  .attr('x', x1)
  .attr('y', y1)
  .text("bobo");
}

function mouseExit()
{
    if (infoBox === null)
    return;

    console.log("mouseExit", infoBox);
  infoBox.remove()
  infoBox = null;
}

代码没有实现移动。 首先，我只想在mouseenter和mouseout上创建和销毁rect / text。

我怎么做？

链接到小提琴。

Answer 1

您可以在svg上创建透明div或任何其他标签，大小相同。 比处理此叠加层的鼠标事件。 这样您就不会被内部组件事件打断。 缺点 - 您必须手动处理与内部的交互。

像这样：

<svg style="z-index:1;position:absolute;left:0;width:200px;top:0;height:200px">...</svg>

<div id="overlay" style="background:rgba(0,0,0,0);z-index:2;position:absolute;left:0;width:200px;top:0;height:200px"></div>

Answer 2

而不是mouseout ，使用mouseleave 。

MDN对它们之间的差异有一个很好的解释： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

这是您的代码只有这个改变：

 var infoBox = null; var theSVG = d3.select("#theScreen") .append("svg") .attr("width", 250) .attr("height", 250); // Register mouse events theSVG .on("mouseenter", mouseEnter) .on("mouseleave", mouseExit); function mouseEnter() { if (infoBox !== null) return; var coord = d3.mouse(d3.event.currentTarget); x1 = parseInt(coord[0]); y1 = parseInt(coord[1]); console.log("mouseEnter", x1, y1, infoBox); infoBox = theSVG.append("g") .attr('class', 'ssInfoBox'); var rectItem = infoBox.append("rect") .attr('x', x1) .attr('y', y1) .attr('width', 30) .attr('height', 20); var textItem = infoBox.append("text") .attr('x', x1) .attr('y', y1) .text("bobo"); } function mouseExit() { if (infoBox === null) return; console.log("mouseExit", infoBox); infoBox.remove() infoBox = null; } 

 #container { width: 400px; height: 400px; background-color: #0BB; } #theScreen { position: absolute; top: 50px; left: 50px; width: 250px; height: 250px; background-color: #333; cursor: crosshair; } .ssInfoBox rect { fill: #383; } .ssInfoBox text { fill: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <div id='container'> <div id='theScreen'> </div> </div>