Question

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

任何人都可以想到为什么某些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);
                }

感谢您的帮助！

Answer 1

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

多次调用Raphael悬停功能只能“有时”工作

1 个答案: