首页 > 其他 > 详细

tap 事件会触发两次问题

时间:2019-07-11 19:32:46      阅读:115      评论:0      收藏:0      [点我收藏+]

 

  因项目中使用 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 事件会触发两次问题

原文:https://www.cnblogs.com/zhangym118/p/11171686.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!