对Raphael悬停功能的多个呼叫只能“有时”起作用

我有一个叫做drawPoint的函数，它使用for循环多次调用。迭代量根据用户正在查看的幻灯片而变化。平均而言，循环重复8到10次。有时，悬停事件会将粘贴到所有迭代中，有时它不会。大多数时候它会错过3到4个点。没有真正的模式。但是，如果一个元素一旦失败，即使浏览器刷新后，它仍然无法接收事件。对Raphael悬停功能的多个呼叫只能“有时”起作用

任何人都可以想到为什么一些svg元素会接收事件，其他人不会？起初我以为有一个操作员帽，但是工作事件的数量波动。这里是被称为一遍又一遍地在for循环的功能：

drawPoint

drawPoint:function (imgPoint, radius, index, arrowHead) { 

    var div = document.createElement("div"); 
    //div.className = "point"; 
    //div.id = "p" + index; 

    if(arrowHead == false){ 
     div.style.width = radius*2 +"px"; 
     div.style.height = radius*2 +"px"; 

    }else{ //TODO implement actual arrowhead instead of smaller dot 
     div.style.width = radius/2 +"px"; 
     div.style.height = radius/2 + "px"; 

    } 

    div.style.zIndex = 10000 + index + ""; 

    var paper = Raphael(div); 
    var point; 

    //console.log("leader x: " + leader.xLength + "\nleader y: " + leader.yLength + "\nmagnitude: " + leader.magnitude); 
    if (arrowHead == false) { 
     point = paper.circle(radius, radius, radius); 
    } 
    else if (arrowHead == true){ 
     point = paper.circle(radius/2, radius/2, radius/2); 
    } 

    point.node.setAttribute("id", "p" + index); 
     point.attr({ 
      "stroke":Overlay.annoColor, 
      "fill":Overlay.annoColor 
     }); 

    point.hover(function(){ 
      if ($("#allAnno").is(":checked")) 
       Overlay.showLabel(parseInt(this.node.getAttribute('id').substring(1)))}, 
     function(){ 
      if ($("#allAnno").is(":checked")) 
       Overlay.hideAllLabels(); 

     } 
    ); 

    /*$(".point").hover(function(){ 
      if ($("#allAnno").is(":checked")) 
       Overlay.showLabel(parseInt($(this).attr('id').substring(1)))}, 
     function(){ 
      if ($("#allAnno").is(":checked")) 
       Overlay.hideAllLabels(); 
     });*/ 

    return div; 
}

而实例化循环...

for (var v = 0; v < Overlay.currentOverlaySet.length; v++) { 
        ImageProvider.viewer.drawer.addOverlay(Overlay.drawPoint(Overlay.currentOverlaySet[v].SDPoint, 
         pointRadius, Overlay.currentOverlaySet[v].matchIndex, Overlay.currentOverlaySet[v].arrowHead), 
         Overlay.currentOverlaySet[v].SDPoint, Seadragon.OverlayPlacement.CENTER); 
       }

感谢您的帮助！

来源

2013-02-19 atomSmasher

可以在jsfiddle.net中演示这个吗？ – Neil 2013-02-19 16:33:54

@尼尔它可能是。我会尝试和压缩一个例子，今天晚上 – atomSmasher 2013-02-19 17:40:32

我经常指出，如果你可以在jsfiddle中只用相关的代码来分离问题，那么你可以马上解决它 - 在这种情况下强烈推荐。 – nrabinowitz 2013-03-10 18:09:01

如果有人遇到这个问题，解决办法是修改Raphael纸张的大小，而不是传递给Raphael对象的div。出于某种原因，divs互相覆盖，阻止了某些元素的悬停事件。你也可以通过修改多个对象的z-index来修复这个问题，但是它并不是一成不变的......取决于你的应用程序。

来源

2013-03-11 02:59:34 atomSmasher

对Raphael悬停功能的多个呼叫只能“有时”起作用

回答

相关问题