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