tap 事件会触发两次问题
因项目中使用 coffeeScript (http://coffee-script.org/),此处记录下用 coffeeScript 语法解决 tap 事件触发两次的问题。
在 id="button" 上绑定 tap 触摸事件如下代码:
$(document).on 'tap', '#button', ()->
# 业务逻辑代码
console.log(111)
分析:
在浏览器中点击一次 button 会输出两次 ‘111’,手机上测试偶尔输出一次,偶尔两次,很是奇怪,一开始怀疑是事件冒泡或者是默认行为,依次尝试:
1、防止冒泡和捕获
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
因为是在微信端使用,所以不考虑 IE,在代码中加入e.stopPropagation(),111 输出偶尔一次,偶尔两次。 2、阻止默认行为
w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 加入 preventDefault() ,111 输出两次,说明无效
解决:
两种方法都不能确保触发一次,所以采用比较生硬的方法:setTimeout 延迟 200s 阻止事件再次执行:
flag = true
$(document).on 'tap', '#button', ()->
# 业务逻辑代码
if flag
setTimeout(() ->
console.log(111)
flag = true
, 200)
flag = false
正常 js 写法:
var flag = true
$("#button").on("tap",function(){
if (flag){
setTimeout(function () {
console.log(111)
flag = true
}, 200)
}
flag = false
})
tap 事件会触发两次问题的更多相关文章
- jquerymobile tap事件被触发两次
首先介绍一下这个问题出现的背景:我在写网站时想要一套代码兼容手机端和pc端,所以用了jquery和jquery mobile,点击事件用的jquerymobile tap事件,但是在移动端测试时出现点 ...
- label标签内含有input元素,点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...
- 点击label时click事件被触发两次的坑
今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...
- jquery给label绑定click事件被触发两次解决方案
首先我们看下面的代码片段(label包裹checkbox) <div class="example"><label for="chk_6" c ...
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
- webpack学习笔记——项目引入zepto及tap事件失效的解决
先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.confi ...
- chrome 55 zepto tap事件出错?
刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...
- 解决label点击事件触发两次问题
问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...
- 解决jQuery中dbclick事件触发两次click事件
首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...
随机推荐
- 第2章:LeetCode--第二部分
本部分是非Top的一些常见题型及不常见题 LeetCode -- Longest Palindromic Substring class Solution { public: int isPalind ...
- time() 函数时间不同步问题
1.时区设置问题 处理方法:编辑php.ini 搜索 “timezone” 改写为 PRC 时区 2.服务器时间不同步 处理方法:设置服务器时间和本地时间进行同步
- python3 获取自建gitlab用户提交信息
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019-12-03 14:20 # @Author : Anthony # @Emai ...
- Aso.Net Core 的配置系统Configuration--转
转自https://www.cnblogs.com/Lueng/p/11963819.html 目录 Aso.Net Core 的配置系统Configuration 01.Json文件的弱类型方式读取 ...
- 正则表达式的运行原理详解(NFA,多分支原理)
原文:https://blog.csdn.net/yx0628/article/details/82722166
- 创建新表,自动授权trigger
需求 一个用户下三个表,开发人员不定时进行rename表名称,create原表名称 as old_table 插入少量数据,另一个业务用户需要访问该表,由于表名称rename导致经常需要手工授权. 需 ...
- hdu 4496 其实还是并查集
Problem Description Luxer is a really bad guy. He destroys everything he met. One day Luxer went to ...
- java多线程:继承Thread和实现Runable接口的区别
java中我们想要实现多线程常用的有两种方法,继承Thread 类和实现Runnable 接口,有经验的程序员都会选择实现Runnable接口 ,其主要原因有以下两点: 首先,java只能单继承,因此 ...
- (二十四)JSP标签之基本标签(<jsp:标签名>)
一.常用标签 1.1 jsp中标签一共有8中,其中常用的有6中,本文将介绍这6种常用的标签. 1.2 6种标签 1. <jsp:include> <jsp:include>标签 ...
- IDEA如何本机调试springboot应用打的jar包
背景: 我用命名行 执行 java -jar ***.jar发现 springboot启动时抛出错误,因此想debug进去看看究竟为什么出错. 1 在命令行执行 java -jar -Xdebug ...