解决jquery绑定click事件出现点击一次执行两次问题
Posted donchen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决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是否被调用过了
以上是关于解决jquery绑定click事件出现点击一次执行两次问题的主要内容,如果未能解决你的问题,请参考以下文章