问题描述

在项目中有一个需求,需要给一个按钮绑定点击事件,通过用户的点击操作来切换按钮的背景色和按钮文字,再加一些业务逻辑操作。因为项目是基于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()方法来阻止它冒泡,然后在事件开始处增加一个判断来确定阻止冒泡事件是否调用过,这样就规避了点击事件的冒泡问题,关于事件冒泡的详细解释,可以查看这篇文章