如何防止事件冒泡錨定觸發不止一次

Question

我有一個正在使用的功能可以正常工作，但是由於起泡它會觸發2-3次。

我正在使用此事件偵聽器：

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

這樣，以后仍會添加錨點。 但是，當我單擊錨點時，它將以這種方式觸發2-3次。 如果我將其更改為：

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

它只發射一次，並且運行良好。

我已經嘗試過e.stopPropagation ， e.stopImmediatePropagation ， e.preventDefault各種組合， e.stopPropagation無法使第一個事件偵聽器僅觸發一次。

更新：

在准備此問題的代碼段時，我解決了我的問題：但是我想知道為什么會導致上述問題。

一些背景知識：我正在制作一個腳本，該腳本可以模擬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 }