解决移动端页面滚动后不触发touchend事件

问题

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件。用的较多的是使用touchend事件替代PC端的click和mouseup事件。

可是,touchend事件在页面滚动时有个问题。在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作。

解决方法

解决方法非常easy。就是在页面滚动时停止touchend事件冒泡。这样就能够防止触发touchend事件。

用法

引入该函数并进行调用。

function stopTouchendPropagationAfterScroll(){
var locked = false; window.addEventListener('touchmove', function(ev){
locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));
}, true);
function stopTouchendPropagation(ev){
ev.stopPropagation();
window.removeEventListener('touchend', stopTouchendPropagation, true);
locked = false;
}
}

另外说明

在移动端,scroll事件是在滚动结束后才会触发一次。而touchmove事件是在滑动过程中多次触发。使用scroll会比使用touchmove在性能上有一定优化。

可是。上面代码之所以不用scroll事件,而用touchmove事件。是为了同一时候适用于小于一个屏幕高度的页面。所以也是不得已使用touchmove。

解决移动端页面滚动后不触发touchend事件的更多相关文章

  1. vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式

     vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭 ...

  2. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  4. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  5. 我是如何通过debug成功甩锅浏览器的:解决fixed定位元素,在页面滚动后touch事件失效问题

    如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart ...

  6. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  7. 移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。

    /*仅适用于内容中点击元素.对于拖动等元素,需要自行在页面处理. * 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素. * 如果手指移动距离小于10像素, ...

  8. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  9. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

随机推荐

  1. ASP.NET Core的配置(4):多样性的配置来源[上篇]

    较之传统通过App.config和Web.config这两个XML文件承载的配置系统,ASP.NET Core采用的这个全新的配置模型的最大一个优势就是针对多种不同配置源的支持.我们可以将内存变量.命 ...

  2. 将spring源码导入到eclipse中

    前置条件: 1. 正确安装jdk,并配置好JAVA_HOME.PATH.(我这里安装的是jdk1.8) 2. 正确安装好eclipse.(我的eclipse版本是: Neon Release (4.6 ...

  3. android 回调的理解(结合接口)

    什么是回调 回调其实是一种双向调用模式,也就是调用方在接口被调用时也会调用对方的接口.通俗的解释为:类A调用了类B中的方法1,然后类B最后又反过来调用类A中的方法2,即把结果返回给类A. 回调的具体实 ...

  4. Modernizr 与 Polyfill

    之前提到,Modernizr 是 HTML5 和 CSS3 的特性检测工具,这里简单介绍一下它的用法.最简单的用法是在页面的 <head> 中添加 Modernizr 的 JavaScri ...

  5. 关于链接target的问题

    <a href="http://www.baidu.com" target="_blank">点击链接</a> target: _bla ...

  6. 正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate

    性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈 ...

  7. oracle一个用户密码管理多达同意三次企图登录

    假设一个用户登录连续失败三次.两日,锁定用户,两天后再次登录的用户的能力. 创建profile文件: 更新账户: 三次登录失败后用户就会被锁定: 用户锁住之后要怎么给他解锁: 解锁之后就能够正常登录了 ...

  8. springAop注解式Demo

    package AnnoAspect.Aspect; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.anno ...

  9. linux下pppoe连接管理

    一.安装pppoe组件 sudo apt-get install pppoe pppoeconf 二.配置pppoe 图形界面配置pppoe,在terminal里输入 nm-connection-ed ...

  10. Linux针对缺少响应xxx.so.xxx解决方案

    问题描述: 在yum安装,偶尔会出现缺少xxx.so.0  xxxx.so.1等类似问价,大部分都是缺失对应的库文件 --> Processing .5p1-.fc27.x86 _64--> ...