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

时间: 2020-12-11阅读: 1642标签: 事件

问题

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

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


解决方法

解决方法很简单,就是在页面滚动时停止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。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9922

事件委托以及在 angular & vue & react 中的应用

事件委托利用了事件冒泡,只指定一个 event handler,就可以管理某一类型的所有事件。比如 click 事件会一直冒泡到 document 层次,也就是我们可以为整个页面指定一个onclick handler, 而不必给每一个可单击的元素分别添加 event handler

Openlayers 禁用鼠标双击缩放事件(ol.interaction.DoubleClickZoom)

openlayers地图加载时,默认会有9个交互事件,其中可以看到控制双击缩放事件的DoubleClickZoom,我们知道在绘制线时,结束的响应事件也是双击,所以在绘制线时和双击缩放事件就会冲突了。

vue的事件冒泡

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡

js 任意元素解绑任意事件的兼容代码

解绑事件有三种:注意:用什么方式绑定事件,就应该用对应的方式解绑事件,解绑事件(IE 谷歌 火狐都支持 但是得对于的ON事件),对象.addEventListener(没有on的事件类型,命名函数,false);---绑定事件

HTML5 手势检测原理和实现

随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统

几种HTML标签伪元素绑定事件的方式

图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所有页面都是通过伪元素来展示图标的,将所有页面中图标改成 DOM 元素也不太可行。

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。

javascript的事件有哪些?

JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。那么,javascript的事件有哪些?本篇文章将给大家来介绍关于javascript中常用的事件。

vue 自定义事件调度处理功能

vue 的 emit 和mixins 两个特性是这篇文章的基础,当然抛开vue 也可以直接使用全局调用实现,所以这块不做讨论

vue.js 事件绑定

(1)使用v-on指令可以添加事件监听,语法:2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!