红圈的点击事件在IE8中被调用了两次答案

【问题标题】：the red circle's click event is invoked twice in IE8红圈的点击事件在IE8中被调用了两次
【发布时间】：2013-03-05 07:14:35
【问题描述】：

当我点击红色圆圈时，窗口会弹出一次警报。它在 Firefox 和 chrome 中运行良好，但在 ie8 中，它会弹出两次警报。我该如何解决？请在下面查看我的代码：

Raphael("world", 1000, 400, function () {
        var r = this;
        r.rect(0, 0, 1000, 400, 0).attr({
                stroke: "none",
                fill: "0-#9bb7cb-#adc8da"
        });
        var click = function(){
                alert(this.type);    
        };

        r.setStart();
        var hue = Math.random();
        for (var country in worldmap.shapes) {
                r.path(worldmap.shapes[country]).attr({stroke: "#ccc6ae", fill: "#f0efeb", "stroke-opacity": 0.25});
        }

        var dot = r.circle(772.9870633333333, 166.90446666666668).attr({
                title: "Point",
                fill: "red", 
                stroke: "#fff", 
                "stroke-width": 2, 
                r: 5
        });
        var world = r.setFinish();
        world.click(click);
});

【问题讨论】：

试试这个... var click = function(e){ e.stopPropagation();警报（this.type）； };
感谢您的帮助，但它不起作用。

标签： javascript jquery internet-explorer-8 raphael vml

【解决方案1】：

我遇到过这个问题好几次了。通过使用鼠标向上事件而不是单击事件来解决它。 IE 很烂。

【讨论】：

【解决方案2】：

我找到了解决此问题的方法，将 Raphael Set 对象替换为数组对象以推送所有 Rahpael 元素对象，然后循环数组以添加每个元素的点击事件。见以下代码：

    var set = [];
//  r.setStart();
    for (var country in worldmap.shapes) {
        var element = r.path(worldmap.shapes[country]).attr({stroke: "#ccc6ae", fill: "#f0efeb", "stroke-opacity": 0.25});
        set.push(element);
    }

    var dot = r.circle(772.9870633333333, 160.90446666666668 , 5).attr({
            title: "Point",
            fill: "red", 
            stroke: "#fff", 
            "stroke-width": 2
    });

    set.push(dot);
    for(var i = 0; i < set.length; i++){
        var element = set[i];
        element.click(click);
    }
//  var world = r.setFinish();
//  world.click(click);

【讨论】：

【解决方案3】：

我在 Firefox 中遇到了类似的问题，尽管我所做的完全不同。

我解决它的方法是防止事件在太短的时间间隔内触发两次。

我会使用这个功能：

function rateLimit(func) {
    var lastcall = func.lastcall || 0,
        now = new Date().getTime();
    if( now-lastcall < 250) return false;
    func.lastcall = now;
    return true;
}

然后在我想限制触发太频繁的功能中，我可以这样做：

if( !rateLimit(arguments.callee)) return false;

但是，如果您使用alert()，您可能会遇到一个小问题，因为这将完全阻止执行并且第二次运行仍然会触发。我强烈建议使用console.log() 而不是alert() 来跟踪值，因为这样可以避免中断程序的流程（尤其是当你进入异步的东西时，如果你用@ 停止事情，你会得到真正的谜团。 987654326@)

希望这会有所帮助！

【讨论】：