H5页面的点击事件click 无论在浏览器 iframe还是小程序里面 都会出现点击无反应或者反应慢的情况出现

所以决定用touchend事件来代替click

但是touchend事件触发比较灵敏 在滑动页面时 如果不小心触碰有touchend事件的元素都会触发

尤其是在满屏都有touchend元素的页面中 只要稍有滑动都会触发该事件 很无奈

解决方法如下:

监听滑动事件 在滑动事件里面阻止touchend事件

   function stopTouchendPropagationAfterScroll() {

      var locked = false;

      window.addEventListener('touchmove', function() {
locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));
}, true); function stopTouchendPropagation(ev) {
ev.stopPropagation();
window.removeEventListener('touchend', stopTouchendPropagation, true);
locked = false;
}
} var divs = $(".go");
stopTouchendPropagationAfterScroll();
divs.on("touchend", function() {
alert('触发touchend')
});

移动端click事件无反应或反应慢 touchend事件页面滑动时频繁触发的更多相关文章

  1. 小程序 onReachBottom 事件快速滑动时不触发的bug

    一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...

  2. Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  3. 小程序:scroll-view组件滑动多次触发scroll事件的bug解决

    在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求:若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想 ...

  4. 移动端click时间、touch事件、tap事件

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  5. 移动端click时间、touch事件、tap事件详解

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  6. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  7. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  8. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  9. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

随机推荐

  1. JS 作用域(执行环境)与作用链---JS 学习笔记(二)

    一  作用域(执行环境) 作用域:定义了变量和函数有权访问的其他数据,决定了他们各自的行为.--------<JS高级程序设计>4.2 好难理解啊~参考了参考尤克希的博客内容,大体上理解了 ...

  2. Asp.net core 学习笔记 Razor Page

    更新 2019-04-27 最近做了更多的 research 发现微软视乎有意发展 razor page. razor page 的定位是 mvvm, 现在还有个叫 blazor 的东西, 类似用 c ...

  3. (7)udp-socket

    # upd 协议:(1)#client 端口:import socketsk = socket.socket(type=socket.SOCK_DGRAM)message = "我来了大哥& ...

  4. mysql查表的时候报错:java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timest

    在spark项目中读取mysql中的数据的时候,发生了报错: 原因:主要是因为数据库中有一些字段为null,无法进行转换: 上面字段那种,我的inserttime字段类型为timestamp类型,不为 ...

  5. Java核心技术卷一 · 笔记(1)

    目录 1.java的关键术语 2.==和equals 3.空串与 Null 串 4.构建字符串 5.封装 6.对象的三个主要特性 7.依赖(dependence).聚合(aggregation).继承 ...

  6. 多功能版vue日历控件

    下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...

  7. 小程序md5加密

    function md5(string) { var x = Array(); var k, AA, BB, CC, DD, a, b, c, d; , S12 = , S13 = , S14 = ; ...

  8. jacoco覆盖率工具测试及性能分析

    ant版本:https://ant.apache.org/bindownload.cgi jdk版本 注: ant 1.10    --->   jdk1.8 ant 1.9      ---& ...

  9. OO第二单元多线程电梯总结分析

    一.概述 这一部分的作业考察的关注点与上一次的作业有所不同,上一次的考察重点主要集中在输入输出的判定以及多态的考察上面,而这一次是让我们进行多线程程序的调度与开发.这次开发过程中最大的感受就是自己之前 ...

  10. 杨力第一次jjave作业

    感觉jave学起来比c语言难一点,格式要求较高,有更多的东西要记,但是只要认真学应该不是很难,自己应该多写程序.