06 jQuery绑定的点击事件执行两次的解决方法

问题描述

在项目中有一个需求，需要给一个按钮绑定点击事件，通过用户的点击操作来切换按钮的背景色和按钮文字，再加一些业务逻辑操作。因为项目是基于Dojo框架搭建的，所以并不能做到像Vue和React这种数据控制UI渲染的效果，只能通过引入jQuery来给按钮绑定点击事件来完成这个需求，代码如下：

//绑定查看原始影像的按钮事件
$("#btnClick").on("click", function() {
    var htmlinner = $("#btnClick").html();
    if(htmlinner.toString().trim() == "查看图片") {
        $("#btnQRViewImageServer").html("关闭图片");
        $("#btnQRViewImageServer").css("color", "red");
​
        //业务逻辑代码
        ……
          
    }else if(htmlinner.toString().trim() == "关闭图片") {
        $("#btnQRViewImageServer").css("color", "#1bbbb4");
        $("#btnQRViewImageServer").html("查看图片");
​
        //业务逻辑代码
        ……
    } 
})

按照上述所示，此段代码其实是一段很正常的事件绑定代码，但是在程序运行时却意外的发现无论如何点击按钮，它并不会来回切换，在控制台里一调试才发现是因为这段代码执行了两次，所以这段代码里涉及到了事件冒泡的问题。

解决方法

既然是涉及到事件冒泡的问题，那我们就阻止事件冒泡即可，解决方法如下：

//绑定查看原始影像的按钮事件
$("#btnClick").on("click", function(e) {
    if(!e.isPropagationStopped()){         //确定stopPropagation是否被调用过
        var htmlinner = $("#btnClick").html();
        if(htmlinner.toString().trim() == "查看图片") {
            $("#btnQRViewImageServer").html("关闭图片");
            $("#btnQRViewImageServer").css("color", "red");
​
            //业务逻辑代码
            ……
​
        }else if(htmlinner.toString().trim() == "关闭图片") {
            $("#btnQRViewImageServer").css("color", "#1bbbb4");
            $("#btnQRViewImageServer").html("查看图片");
​
            //业务逻辑代码
            ……
        } 
    }
    e.stopPropagation();              //必须要，不然e.isPropagationStopped()无法判断stopPropagation是否调用过
})

由上述代码可看到，我们在代码最后面调用event事件对象的stopPropagation()方法来阻止它冒泡，然后在事件开始处增加一个判断来确定阻止冒泡事件是否调用过，这样就规避了点击事件的冒泡问题，关于事件冒泡的详细解释，可以查看这篇文章。