解决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事件出现点击一次执行两次问题的更多相关文章
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决
Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...
- IOS上给body和html绑定click事件的坑
场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...
- ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...
- jquery批量绑定click事件
jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
随机推荐
- Azure DevOps Server 2019 (TFS)安装教程
概述 Azure DevOps Server 2019 (之前的名称为TFS),作为微软Azure DevOps 的企业私有(on-premises)服务器,是一个为开发团队提供软件协作开发管理的服务 ...
- Windows编译Opencv
下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...
- WPF学习笔记(1):DataGrid单元格实现逐键过滤功能
最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...
- Flask系列04--Flask的蓝图
flask蓝图 一.蓝图 蓝图(Blueprint),类似于实现django中路由分发那种感觉, 可以把Blueprint理解为不能被run的Flask对象 Blueprint实例化时需要的参数 基本 ...
- 在Node中使用ES6语法
Node本身已经支持部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用.为了能使用这些新特性,我们就需要使用babel把E ...
- jQuery的ajax的post请求json格式无法上传空数组
问题描述:在和后端对接时,使用jquery的ajax的post方式向后端传递一序列约定好格式的对象数组.遇到了一个现象:如果对象中的数组是空数组,那么在请求参数中是不会出现的. 以下是数据的对比: ...
- 记录jquery的ajax
1.直接干货 ajax很简单jquery有很好的支持,原生js就不写了.总的说常用的有3个方法 $.post $.get $.ajax 具体参数参考教程http://www.runoob.com/jq ...
- java里面main函数为什么要用static修饰
这学期刚开java,因为之前只写过C++和Python没接触过java,有些写法挺不习惯的,今天写完一个程序,run的时候发现提示the selection can't be launched.... ...
- 【xsy2506】 bipartite 并查集+线段树
题目大意:有$n$个点,你需要操作$m$次.每次操作为加入/删除一条边. 问你每次操作后,这$n$个点构成的图是否是二分图. 数据范围:$n,m≤10^5$. 此题并没有强制在线,考虑离线做法. 一条 ...
- Jmeter保存时,完美解决提示的“拒绝访问”
使用Jmeter时,想保存测试计划,提示"拒绝访问“,这是为啥? 因为给Jmeter的权限不够,也就是说,在打开它的时候,直接双击打开,没有选择”以管理员身份运行“,就会导致”拒绝访问“ ! ...