JS: javascript 點擊事件執行兩次js問題 ,解決jquery綁定click事件出現點擊一次執行兩次問題

 javascript 點擊事件執行兩次js問題

在JQuery中存在unbind()方法，先解綁再添加點擊事件,解決方案為：

$(".m-layout-setting").unbind('click').click(function(){
//此處填寫邏輯代碼
})

 

------

因為利用js在頁面加載后添加需要點擊事件的代碼，發現在點擊后會代碼會執行兩次，因為有toggle效果，導致彈窗出現又很快丟失

查了一些資料，發現這是冒泡的原因，需要在點擊事件代碼中加入阻止冒泡的方法：

e.stopPropagation();

但是發現還是不行
后面查到，off函數可以解除由on函數所綁定的事件，所以在js代碼中on函數前調用下Off函數，就正常了：

$("li.taskli").off('click','a').on('click','a',function(e){ //在on綁定前調用off去除綁定
//$(document).on('click','li.taskli a',function(e) { //原先的寫法
console.log("here")
if ($(this).parent().find('div.popover').size()>0)
{
$(this).popover('destroy')
}else{ 
var uuid = $(this).attr('targetuuid');
var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
$(this).popover({
placement:'bottom',
title:uuid,
html:'true',
content:taskhtml
}).popover('toggle');

getResultFromFile(uuid)
}
e.stopPropagation(); //阻止冒泡
})

 

解決jquery綁定click事件出現點擊一次執行兩次問題

問題定位：通過瀏覽器F12定位到點擊一次出現兩次調用。

問題復現：

$("#mail_span").on("click",function(){
        if($(".treeselect").children(".treeselect-up").css("display")=="none"){
            treeSelectClick();
            var $up = $(".treeselect").find(".treeselect-up");
            $up.css({
                display : "block"
            });
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
        }else{
            treeSelectClick();
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-bottom");
        }
    }
})

 

問題解決：

$("#mail_span").on("click",function(e){
    if(!e.isPropagationStopped()){//確定stopPropagation是否被調用過
        if($(".treeselect1").children(".treeselect-up").css("display")=="none"){
            treeSelectClick();
            var $up = $(".treeselect1").find(".treeselect-up");
            $up.css({
                display : "block"
            });
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
        }else{
            treeSelectClick();
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-bottom");
        }
    }
    e.stopPropagation();//必須要，不然e.isPropagationStopped()無法判斷stopPropagation是否調用過
})

 

查閱資料：

event.preventDefault() ：阻止默認行為，可以用 event.isDefaultPrevented() 來確定preventDefault是否被調用過了
event.stopPropagation() ：阻止事件冒泡，事件是可以冒泡的，為防止事件冒泡到DOM樹上，不觸發任何前輩元素上的事件處理函數，可以用 event.isPropagationStopped() 來確定stopPropagation是否被調用過了