关于click的多次触发问题(冒泡事件)
1、
问题描述:
在点击事件触发时调用接口,若用户多次点击会造成多次调用接口,有时会引起一些数据错误的问题,如支付页面,点击多次时会在后台生成多个相同订单
解决方法:
(1)加flag,让点击事件只执行一次
(2)若点击元素为button,可在置点击事件执行后设置button disabled属性
2、
问题描述:
同一个点击事件多次绑定,会叠加,执行多次
(click事件不能嵌套)
如下:
$(".submit").click(function(){
alert(1)
$(".submit").click(function(){
alert(2)
})
})
第一次点击,执行结果:1
第二次点击,执行结果:1,2
第三次点击,执行结果:1,2,2
第四次点击,执行结果:1,2,2,2
........
3、涉及到click事件,不能嵌套在其他事件中执行,要将其单独拿出来
这个问题主要是由于事件冒泡引起的,可以将事件绑定在其父元素上
关于click的多次触发问题(冒泡事件)的更多相关文章
- vue中click阻止事件冒泡,防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
- WPF的路由事件、冒泡事件、隧道事件(预览事件)
本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所 ...
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- jQuery之防止冒泡事件
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 方法1: event.stopPropagation(); // 阻止事件冒泡 有时候点击提交按钮会有一些默认事件.但是如果没有通过验证 ...
随机推荐
- Docker save & load
docker save Estimated reading time: 1 minute Description Save one or more images to a tar archive (s ...
- Dependency Injection2
IoC容器和Dependency Injection 模式 使用 Service Locator 依赖注入的最大好处在于:它消除了MovieLister类对具体 MovieFinder实现类的依赖 ...
- 蚂蚁金服 Service Mesh 渐进式迁移方案|Service Mesh Meetup 实录
小蚂蚁说: 本文是基于在 Service Mesher Meetup 上海站的主题分享<蚂蚁金服 Service Mesh 渐进式迁移方案>内容整理,完整的分享 PPT 获取方式见文章底部 ...
- P4574 [CQOI2013]二进制A+B
传送门 思路: 本题可用数位DP来做,设 f [ i ][ a ][ b ][ c ][ j ] 表示当前枚举到(二进制下的)第i位,a' b' c'各用a,b,c了几个1,j表示最后一位是否有进位. ...
- 数据库备份出现警告:Warning: Using a password on the command line interface can be insecure. Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions, even thos
1.先来看原备份数据库语句: mysqldump -h 127.0.0.1 -uroot -ppassword database > /usr/microStorage/dbbackup/cap ...
- mysql 和 sqlserver中备份一张表的区别
sqlserver中备份一张表 SELECT * into qa_buglist_bak FROM qa_buglist 不管表的数据有多大,速度很快: mysql中上述语句就无效了,须得新建一张表, ...
- JavaSE习题 第八章 线程
问答题 1.线程和进程是什么关系? 进程是程序的一次动态执行,对应了从代码加载,执行至执行完毕的一个完整的过程 线程是比进程更小的执行单位,一个进程在其执行过程中可以产生多个线程,形成多条执行线索 2 ...
- idea环境下建立maven工程并运行scala程序
idea中scala编程环境及建立maven工程 1.下载idea软件并破解:http://blog.csdn.net/nn_jbrs/article/details/70139178 2.安装sca ...
- 力扣(LeetCode)415. 字符串相加
给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和num2 都不包 ...
- cordova + Vue 开发 APP 上手指南
什么是 cordova cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架.其支持调用手机系统(Android.IOS.W ...