因项目中使用 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 事件会触发两次问题的更多相关文章

  1. jquerymobile tap事件被触发两次

    首先介绍一下这个问题出现的背景:我在写网站时想要一套代码兼容手机端和pc端,所以用了jquery和jquery mobile,点击事件用的jquerymobile tap事件,但是在移动端测试时出现点 ...

  2. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  3. 点击label时click事件被触发两次的坑

    今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...

  4. jquery给label绑定click事件被触发两次解决方案

    首先我们看下面的代码片段(label包裹checkbox) <div class="example"><label for="chk_6" c ...

  5. iframe onload事件触发两次

    标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...

  6. webpack学习笔记——项目引入zepto及tap事件失效的解决

    先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.confi ...

  7. chrome 55 zepto tap事件出错?

    刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...

  8. 解决label点击事件触发两次问题

    问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...

  9. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

随机推荐

  1. Python【BeautifulSoup解析和提取网页数据】

    [解析数据] 使用浏览器上网,浏览器会把服务器返回来的HTML源代码翻译为我们能看懂的样子 在爬虫中,也要使用能读懂html的工具,才能提取到想要的数据 [提取数据]是指把我们需要的数据从众多数据中挑 ...

  2. 谈谈Python中pop与remove的用法

    remove() 函数用于移除列表中某个值的第一个匹配项. remove()方法语法:  list.remove(obj) 如果obj不在列表中会引发 ValueError 错误,通常先使用count ...

  3. Idea中一个服务按多个端口同时启动

    1.勾选并行启动 2.-Dserver.port=9018

  4. 官网实例详解-目录和实例简介-keras学习笔记四

    官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras   版权声明: ...

  5. 威联通212 http 在密码正确的情况下无法登录问题解决

    *现象: 1.putty 可以正常登录 2.smb可以正常登录 3.http 提示密码错误或无效 *解决办法: 1.通过putty   ssh登录到设备 2.执行以下代码 [~] # cp /etc/ ...

  6. (四)Maven中的仓库

    一.分类 maven的仓库只有两大类: 1.本地仓库 2.远程仓库,在远程仓库中又分成了3种: 2.1 中央仓库 2.2 私服 2.3 其它公共库 二.本地仓库 本地仓库,顾名思义,就是Maven在本 ...

  7. (十)springmvc之文件的处理

    一.同步上传文件 导入common-fileupload这个jar包. 配置     springmvc-servlet.xml <?xml version="1.0" en ...

  8. C# 第一次做项目。一些经验总结。

    这是我的第一篇博客,写得不好望大家多多包涵. 初学C#2个多月,拿着老师给的项目,试着做了做,发现自己在编程方面有很多陋习与编程知识方面的不足. 首先是没有遵守某一个设计模式,这导致我想到哪里就做到了 ...

  9. 【vue】过滤器的使用

    一.在methods中使用过滤器------全局定义的过滤器 //main.js中 import Vue from 'vue' Vue.filter('testFilter1',function(va ...

  10. java封装数据类型——Integer

    今天来学习整型 int 的封装数据类型,Integer. 1. 定义 首先来看看定义.可以看到,Integer 继承 Number 抽象类,实现了 Comparable 接口.Number 类是常用数 ...