4

我有一个调用的函数drawPoint，它使用 for 循环多次调用。迭代次数根据用户正在查看的幻灯片而变化。平均而言，循环迭代 8 到 10 次。有时悬停事件会坚持所有的迭代，有时则不会。大多数时候它会错过 3 到 4 分。没有真正的模式。但是，如果一个元素一旦接收到一个事件失败，它总是会失败，即使在浏览器刷新之后也是如此。

谁能想到一些 svg 元素会收到事件而其他元素不会收到事件的原因？起初我以为有处理程序上限，但工作事件的数量会波动。这是在 for 循环中反复调用的函数：

绘图点

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);
                }

谢谢你的帮助！

4

1 回答 1

1

如果有人遇到这个问题，解决方案是修改 Raphael 论文的大小，而不是修改传递给 Raphael 对象的 div。出于某种原因，div 相互覆盖，阻止了某些元素的悬停事件。您还可以通过更改多个对象的 z-index 来解决此问题，但它不是那么可靠……取决于您的应用程序。

于 2013-03-11T02:59:34.073 回答