鼠标悬停事件不会触发以触发 D3 中的单击事件

mouseover event is not fired up to click event fire in d3

本文关键字：事件 单击 D3 鼠标 悬停      更新时间：2023-09-26

我是 d3 的新手，我在树形图上工作，在那个鼠标悬停事件没有被触发点击事件触发。如果在某个节点上触发 click 事件，则鼠标悬停仅适用于这些子节点。

代码是 ：

 var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
  .attr('pointer-events', 'all')
  .on("mouseover", overNode)
  .on("mouseout", outNode)
  .on("mouseUp",mouseUp)
  .on("click", click);
function click(d) {  
   if (d.children) {
      d._children = d.children;
      d.children = null;  
   } else {
      d.children = d._children;
      d._children = null;  
   }  
   update(d);
}

这是你的小提琴： https://jsfiddle.net/thatoneguy/xdpzrxx1/2/

这是有效的。我添加了以下内容进行测试：

    .on("mouseover", function(d){ console.log(d); overNode(d)})
    .on("mouseout",  function(d){ console.log(d); outNode(d)}) 
    .on("mouseUp",  function(d){ console.log(d); mouseUp(d)})
    .on("click",  function(d){ console.log(d); click(d)});

我还将您的 DragDropManager 对象移动到 JavaScript 的顶部，就像在它没有被发现之前一样。这是由于它是全局的，并且在创建依赖于它的其他元素之后实例化。

相关文章：