Question

我正在使用d3.js绘制reingold-tilford树。我将鼠标悬停功能添加到节点，如下所示：

.on("mouseover", function(d) {
  return tooltip.style("visibility", "visible").text(function() {
    d.name;
  })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

它在一个html中工作正常，但是，当我将这个html加载到模态对话框中时，鼠标悬停功能对节点文本没有生效，我只能在悬停在圆圈上时看到工具提示。

请帮我一把！

Answer 1

您尝试将事件添加到的元素在绑定事件时不存在。要解决此问题，您必须将事件添加到文档以通过传播获取事件。

要解决您的问题，您应该更改此信息：

$("mySelector").on("mouseover", function(e) { ... });

对此：

$(document).on("mouseover", "mySelector", function(e) { ... });

Answer 2

我已经解决了我的问题。事实证明我的原始文本有一个css：

pointer-events: none;

我删除它并且它有效！

为什么mouseover方法不能在对话框中的节点文本上工作？

2 个答案: