對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懸停功能的多個呼叫只能「有時」起作用

回答

相關問題