4

这里相对较新的编码器。我正在使用 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 会一遍又一遍地触发。我没有离开这个形状，只是在它里面移动。

以前，我一直在使用 mouseover 和 mouseoff，但我遇到了同样的问题。圆圈没有子元素。

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

编辑：这是 Dropbox 上的一个活生生的例子。

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

4

1 回答 1

3

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

如果你确实需要它——我猜你打算在里面放一个箭头——你需要确保它永远不会与点重叠。首先给这个元素一个a background-color:#f00，这样你就可以清楚地看到它的位置，然后调整它的高度一个位置。

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

于 2012-11-29T18:54:15.517 回答