mouseleave和mouseout都经常触发-Java 学习之路

相对较新的编码器在这里 . 我正在使用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中 .

编辑：这是一个 live example 在Dropbox上 .

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

1 回答

3

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

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

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

回复于 2024-05-02T00:05:50+08:00

mouseleave和mouseout都经常触发

1 回答

相关问题