移动端click事件无反应或反应慢 touchend事件页面滑动时频繁触发
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事件页面滑动时频繁触发的更多相关文章
- 小程序 onReachBottom 事件快速滑动时不触发的bug
一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- 小程序:scroll-view组件滑动多次触发scroll事件的bug解决
在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求:若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想 ...
- 移动端click时间、touch事件、tap事件
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端click时间、touch事件、tap事件详解
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
随机推荐
- 提供HTML5播放RTSP流 提供微信播放RTSP流 HTML5支持rtsp web播放rtsp,微信支持rtsp
首先H5的video不支持RTSP播放,以下是html5的video官方介绍 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(O ...
- SQL 函数 coalesce()、row_number()的用法
coalesce()函数 ①用途: 将空值替换成其他值 返回第一个非空值 ②表达式: COALESCE是一个函数, (expression_1, expression_2, ...,expressio ...
- 【XAF问题】如何判断这个对象的进出类型
一.问题 1. 如何判断这个对象的进出类型 二.思路 第一次进过的时候,存个字段在对象的字段,例如已经过了就给他true,再回来就是false,再过去就true 三.方法 在 A_rfidperson ...
- Petrozavodsk Winter Camp, Warsaw U, 2014, A The Carpet
一个地图上有若干障碍,问允许出现一个障碍的最大子矩形为多大? 最大子矩形改编 #include<bits/stdc++.h> using namespace std; #define re ...
- .net邮件发送帮助类
代码如下: using System; using System.Collections.Generic; using System.Text; using System.Configuration; ...
- multi lstm attention 坑一个
multi lstm attention时序之间,inputs维度是1024,加上attention之后维度是2018,输出1024,时序之间下次再转成2048的inputs 但是如果使用multi ...
- 软件工程wc项目,基于py
###WC项目文件链接:https://github.com/ILTHEW/wc.git 个人项目:WC 实践是理论的基础和验证标准,希望读者贯彻"做中学"的思想,动手实现下面的项 ...
- [luogu P3960] [noip2017 d2t3] 队列
[luogu P3960] [noip2017 d2t3] 队列 题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Syl ...
- MyCat配置运行
昨天把mycat的环境搭建差不多了,今天直接上配置文件: 主要需要修改三个配置文件: rule.xml schema.xml server.xml rule.xml配置如图: <?xml ver ...
- python,pip环境变量设置
安装好python后,配置环境变量. 安装pygame需要先配置两个环境变量. 第一个是python的.先打开计算机,然后点击‘系统属性’然后点击‘高级系统设置’然后点击‘环境变量’在系统变量中找到p ...