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
    })
    

      

  • 相关阅读:
    Linux 磁盘与文件系统管理
    mysql join
    iostat
    解决TIME_WAIT过多问题
    mysql 数据库性能追踪与分析
    CHECKPOINT
    DTRACE -MYSQL
    ORCLE INNODB 博客与 innodb_lru_scan_depth
    innodb 变量
    mysql博客
  • 原文地址:https://www.cnblogs.com/zhangym118/p/11171686.html
Copyright © 2011-2022 走看看