情景:

我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥?

浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内容)。

如果300ms内没有再一次click,那么就判定这是一次单机行为。所以我们基本上都用(touchstart/touchend)。

但是这些事件在执行完之后还会执行一次click事件(具体原因解释起来太麻烦了,这要从JS事件监听机制的根本的讲起。。。其实我也了解有限。。)

解决:

解决方案一:e.preventDefault()

没错就是这个大家熟悉到烂的方法,我也是写来写去死马活马的用,在ios上效果很不错,完美解决穿透点击问题,andirod上效果不好(所以有了下面的方法)。

解决方案二:利用pointer-events 这个方法

<div class="up-overlay"></div>
<div class="under-overlay"></div>
<div class="button"></div>

$('.button').on('touchstart',function(){

  $('.up-overlay').hide();
  $('.under-overlay').hide();

  //马上让它不能点击
  $('.under-overlay').css('pointer-events','none');

  //因为click事件需要300ms响应,所以我们时间定义350ms,时间一过又可以正常点击了
  setTimeout(function(){$('.under-overlay').css('pointer-events','all')},350)
})

解决移动端touch事件(touchstart/touchend) 的穿透问题的更多相关文章

  1. 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  2. 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  3. 移动互联网终端的touch事件,touchstart, touchend, touchmove

    如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一 ...

  4. [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove

    前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常 ...

  5. 解决移动端touch事件与click冲突的问题

    最简单的办法,就只绑定一个事件不就行了: 第二种,我觉得和第一种也没啥区别.. const Button = document.getElementById("targetButton&qu ...

  6. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  7. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  8. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  9. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

随机推荐

  1. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  2. JS: 数据结构与算法之栈

    栈 先来看一道题 Leetcode 32 Longest Valid Parentheses (最长有效括号) 给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 ...

  3. POJ 1118

    #include<iostream> #include<set> #include<stdio.h> #include<math.h> #include ...

  4. Python shutil模块(目录和文件操作)

    import shutil #导入shutil模块 copyfileobj方法 将类文件对象fsrc的内容复制到类文件对象fdst shutil.copyfileobj(fsrc, fdst[, le ...

  5. Distributed PostgreSQL on a Google Spanner Architecture – Query Layer

    转自:https://blog.yugabyte.com/distributed-postgresql-on-a-google-spanner-architecture-query-layer/ Ou ...

  6. (转)修改及查看mysql数据库的字符集

    原文:http://www.cnblogs.com/donqiang/articles/2057972.html Liunx下修改MySQL字符集:1.查找MySQL的cnf文件的位置find / - ...

  7. 搭建互联网架构学习--003--maven以及nexus私服搭建

    跳过,等待完善中,,, 后台服务工具maven:使用Nexus配置Maven私有仓库 一.安装配置Nexus 1. 下载nexus https://www.sonatype.com/download- ...

  8. Python -- 图片处理

    使用PIL库 转换图片格式(jpg  -->  png) from PIL import Image Image.open('E:/art.jpg').save('E:/art.png')

  9. 解决Nginx 504 Gateway Time-out问题

    解决方案:在http里设置FastCGI相关参数,如: worker_processes 1; events { worker_connections 1024; } http { include m ...

  10. 业务ID 生成规则

    在实际业务中,是否碰到过这种场景: 我们需要一个单号,要在业务系统里面保证唯一,保证增长? 在运营过程,需要知道业务单发生的时间,最好不用经过系统查找就知道发生的时间? 在排障过程中,不用再次查找就知 ...