解决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 (TFS)中代码文件换行问题解决方案(Git)
之前写过一篇博客"探索TFS Git 库文件换行(CRLF)的处理方式",主要是针对TFVC代码库的. 下面这篇文章说明如何在TFS的Git库中处理代码换行的问题. 概述 在Azu ...
- 从NetCore报错到MySql安全
之前项目在测试服务器上的一些接口时不时会报出下面的错误:(采用Abp框架) "SocketException: 你的主机中的软件中止了一个已建立的连接. STACK TRACE: at My ...
- WPF学习笔记(1):DataGrid单元格实现逐键过滤功能
最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...
- WPF TreeView BringIntoViewBehavior
由于项目需要,需要能够定位TreeView中的点,TreeView的节点数过多的情况下,即使找到了对应的节点并选中展示了,由于不在可视区域内,给用户的感觉还是不好,因此设计如下的Behavior,来实 ...
- linux上安装redis4.0.9
redis安装从3.0的版本到现在4.0的版本,现在装一个4.0的版本供大家学习使用. 先yum安装gcc yum -y install gcc 已加载插件:fastestmirror, langpa ...
- SubLime Text 3 配置SublimeREPL来交互式调试程序
1. 安装 SublimeREPL 插件 等待一下,输入sublimerepl,选择sublimeREPL,然后它就会在后台安装. 安装完之后,查看如下图 选择你要执行的*.py文件,通过这个路径,选 ...
- app绘制手势密码 、九宫格分解
什么是九宫格? 即是我们常见的手势绘制.一共有9个点,让我们进行绘制手势.我们手动操作的时候,通过是按住第一个点,然后移动到最后一点,然后松开,就完成手势的操作,那么,如果要用自动化代码,来让其自动绘 ...
- Spring框架的演变
什么是Spring 如果想要解释Spring,那么最难的部分就是对其进行分类.通常情况下,Spring被描述为构建Java应用程序的轻量级框架,但这种描述带来了两个有趣的观点. 首先,与许多其他框架( ...
- node-rsa非对称加密
写在最前:此文的目的是介绍编码,减少刚接触时的弯路,所以内容且不做详细累述 一.使用 node-rsa 进行非对称加解密 因为 比特币 中使用的非对称加密,所以在npm中对比找到一个比较方便也直观的库 ...
- opencv2函数学习之flip:实现图像翻转
在opencv2中,flip函数用来进行图片的翻转,包括水平翻转,垂直翻转,以及水平垂直翻转. void flip(const Mat& src, Mat& dst, int flip ...