分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

解决jquery绑定click事件出现点击一次执行两次问题

发布时间:2023-09-06 02:25责任编辑:蔡小小关键词:暂无标签

问题定位:通过浏览器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");        }    }})
View Code

问题解决:

$("#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是否调用过})
View Code

查阅资料:

event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了
event.stopPropagation() :阻止事件冒泡,事件是可以冒泡的,为防止事件冒泡到DOM树上,不触发任何前辈元素上的事件处理函数,可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

解决jquery绑定click事件出现点击一次执行两次问题

原文地址:https://www.cnblogs.com/donchen/p/10075790.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved