Question

当我点击红色圆圈时，窗口会弹出一次警报。它在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);
});

Answer 1

我有几次这个问题。通过使用鼠标注册事件而不是单击事件来解决它。 IE糟透了。

Answer 2

我找到了解决此问题的方法，用数组Object替换Raphael Set Object以推送所有Rahpael Elements对象，然后循环数组以为每个Element添加click事件。请参阅以下代码：

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

Answer 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()来跟踪值，因为这样可以避免中断程序的流程（特别是当你进入异步的东西时，如果你停止，你可以得到真正的谜团带alert）

的东西

希望这有帮助！

在IE8中调用红圈的click事件两次

3 个答案: