zoukankan      html  css  js  c++  java
  • 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
    })
    

      

  • 相关阅读:
    Centos 7.3 配置Xmanager XDMCP
    xstart使用方法
    Linux下安装xwindow图形界面
    使用Xftp连接Centos 6.6服务器详细图文教程
    linux远程管理器
    xftp的使用教程
    CentOS 7 关闭图形界面
    Java反射机制
    java反射的性能问题
    Java 虚拟机面试题全面解析(干货)
  • 原文地址:https://www.cnblogs.com/zhangym118/p/11171686.html
Copyright © 2011-2022 走看看