Question

我有一个我正在使用的功能，除了因为冒泡而发射2-3次。

我正在使用此事件监听器：

$("body").on("click", "a", function(e){
    ...
});

所以后来添加的锚仍然被捕获。但是，当我点击一个锚时，它会以这种方式触发2-3次。如果我改为：

$("a").on("click", function(e){
    ...
});

它只发射一次，效果很好。

我尝试了e.stopPropagation，e.stopImmediatePropagation，e.preventDefault的各种组合，并且无法让第一个事件侦听器只触发一次。

更新

在准备这个问题的片段时，我解决了我的问题：但我想知道它为什么会导致上述问题。

一点背景：我正在创建一个模拟jQuery移动页面更改的脚本，而不需要jQm库。这是导致问题的一点代码：

$("body").on("click", "a", function(e){
    var $this = $(this);
    var $parent = $(".page:visible");
    var back = $this.data("rel");
    var targetLink = $this.attr("href")
    if(targetLink.substr(0,1) == "#"){
        e.stopPropagation();
        e.preventDefault();
        if(back == "back" && $hist.length > 0){
            var $prev = $hist.pop();
            $("#title").text($prev.data("title"));
            $prev.css({left: "-100%", display: "block"});
            $parent.animate({left: "100%"},500, function(){
                $parent.hide();
            });
            $prev.animate({left: "0%"}, 500, function(){
                $prev.trigger("pageChange");
            });
        }else if(back != "back"){
            $hist.push($parent);
            if(targetLink != "#" && targetLink != ""){
                var $target = $(targetLink);
                if(!$target.is($parent)){
                    $("#title").text($target.data("title"));
                    $target.css({left: "100%", display: "block"});
                    $parent.animate({left: "-100%"},500, function(){
                        $parent.hide();
                    });
                    $target.animate({left: "0%"}, 500, function(){
                        $target.trigger("pageChange");
                    });
                }
            }
        }
    }
});

使用后退按钮时出现问题，它会触发2-3次并在第一页离开屏幕空白之前“返回”。问题似乎是$hist.push($parent)位的定位。通过重新定位它：

}else if(back != "back"){
    if(targetLink != "#" && targetLink != ""){
        $hist.push($parent);
        var $target = $(targetLink);
        if(!$target.is($parent)){
            $("#title").text($target.data("title"));
            $target.css({left: "100%", display: "block"});
            $parent.animate({left: "-100%"},500, function(){
                $parent.hide();
            });
            $target.animate({left: "0%"}, 500, function(){
                $target.trigger("pageChange");
                //console.log("changeBtnForward");
            });
        }
    }
}

问题停止了。 $ hist与jQuery Mobiles哈希导航的行为类似，用于存储以前的页面，因此当您“返回”时，它会弹出$ hist对象的最后一个“页面”并导航到它。每当您单击页面链接时，它都会将链接所在的页面添加到$ hist对象。

当您绑定到body元素而不是a元素时，我无法确切地看到导致问题的原因。

Answer 1

为什么不使用$('a').click(function (){ //do stuff here } 因为我认为你的代码会产生两次点击：一个在主体上，另一个在锚上

如何防止事件冒出多次锚点触发

1 个答案: