Question

这里比较新的编码员。我正在使用D3和jquery创建一个在光标移动到svg圆圈时触发的跳跃效果。

圆圈的示例如下所示：

<circle cx="20.61855670103093" cy="730" class="top1000 Ragtime albumDot" id="0" r="5.5"></circle>

影响圈子的CSS是：

.albumDot {
  fill: #fff;
  z-index: 250;
  cursor: pointer; /*-- Does not work 90% of the time --*/
  stroke: #111;
  stroke-width: 3px;
  opacity: 1;
}

处理悬停的代码如下所示：

$('.albumDot').mouseenter(function() {
   console.log("mouseover"+ this.id); 
   hopup(jazzdata[this.id]);      
});
$(".albumDot").mouseleave( function() {
   console.log("mouseout"); 
   d3.select("#hopup").attr("style","display:none; opacity:0;");
}

悬停功能工作得很好，但是当我将鼠标移动到任何这些svg形状上时，mouseenter和mouseleave会一遍又一遍地触发。我不会离开它的形状，只是在它内部移动。

以前，我一直在使用鼠标悬停和鼠标移开，但我遇到了同样的问题。圆圈没有子元素。

这种情况发生在Mac上的Safari和Chrome中。

编辑：这是Dropbox上的实例。

http://dl.dropbox.com/u/2272508/jazz_history/index.html

Answer 1

在DOM中，您有一个元素<svg id="HopupTriangle">，它似乎没有被使用。一旦跳跃出现，该元素就会出现在点的顶部，并且它会从鼠标中窃取焦点。简单地给它display:none就可以解决问题。所以，如果你不需要它，摆脱它。

如果你确实需要它 - 而且我猜你计划在其中加一个箭头 - 你需要确保它永远不会重叠点。首先给这个元素一个background-color:#f00，这样你就可以清楚地看到它的位置，然后调整它的高度。

最后，如果此元素具有以重叠点，则向其添加CSS属性pointer-events:none，这将导致浏览器忽略其鼠标事件。不幸的是，这个属性在IE中不起作用，而AFAIK没有针对这个问题的简单解决方法 - 除了通过总是隐藏IE浏览器的这个元素而优雅地降级。

mouseleave和mouseout都经常触发

1 个答案: