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 ...
随机推荐
- COleVariant类
COleVariant本质上是一个枚举,用同一种类型来表达不同的子类型.如同boost中的variant. COLeVariant类是对VARIANT结构的封装. VARIANT结构包含两部分.其一是 ...
- jenkinsFile harbor docker优化版
node { //study-center def mvnHome = tool name: 'maven', type: 'maven' REGISTRY = "192.168.22.27 ...
- Java+Tomcat 环境部署
Java+Tomcat 环境部署 下面在Centos7进行安装Java+Tomcat,网上的很多文章,我在部署中都有些问题,下面是我自己总结的一个安装过程! 安装Java环境 首先,我们先到Java官 ...
- Maven项目上总有一个小红叉问题
一.maven project facet dynamic web module错误解决方案 在Eclipse中使用maven创建web-app的过程中总会遇到一个问题,cannot change v ...
- Java中编码问题
在开发过程中经常会遇到一会乱码问题,不是什么大问题,但是也挺烦人的,今天来将我们开发总结的经验记录下来,希望可以给大家一些帮助. 一些概念: 字符:人们使用的记号,抽象意义上的一个符号.比如:‘1’, ...
- Intercity Travelling CodeForces - 1009E (组合计数)
大意: 有一段$n$千米的路, 每一次走$1$千米, 每走完一次可以休息一次, 每连续走$x$次, 消耗$a[1]+...+a[x]$的能量. 休息随机, 求消耗能量的期望$\times 2^{n-1 ...
- 本地虚拟机NAT模式下怎么设置才可以访问外网
记:因为我要在本机虚拟机上安装Docker,结果发现虚拟机环境不能上网,是主机模式.我要调成net模式下才可以访问外网,这就需要怎么设置.下面文章记录一下. 在本机安装VMware软件后,系统中会自动 ...
- .net Core如何对静态文件的访问进行鉴权操作?
之前给公司开发了一个文件管理服务,最基本的功能就是文件的上传下载,以及更新删除.预览:负责公司各个子系统的相关附件的管理,所有的接口都通过AOP来进行身份拦截认证了,但是在进行预览的时候,因为采用的是 ...
- centos禁止root用户ssh远程登录
首先,我们要以root身份登录远程主机 vim指令编辑ssh配置文件,如 vim /etc/ssh/sshd_config 查找PermitRootLogin,把yes改为no 修改完配置需要重启ss ...
- VBA if...else语句
一个if语句由一个布尔表达式和一个或多个语句组成.如果条件评估为True,则执行if条件下的语句.如果条件评估为False,则执行else部分块下的语句. 语法 以下是VBScript中的if els ...