移动端touchend事件不触发解决方案

移动端touchend事件不触发，需要在touchstart中加入：

1	e.preventDefault();

但是问题来了，阻止默认事件后，页面原先的滚动条也无法滚动了。

查阅了资料，在stackoverflow上得到如下解释：

To workaround this bug you have to call preventDefault() on either the touchstart or first touchmove event. Of course, this prevents the native scrolling, so you will need to re-implement that yourself.

看到最后一句真是内牛满面，我勒个去~

但是我还是不死心，丧心病狂的我找到了touchcancel事件，我们先来看看touch中这几个事件具体含义：

ouchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

补充：touchend事件qq浏览器不执行，可能会需要touchcancel事件代替之。

参考资料：
https://github.com/TNT-RoX/android-swipe-shim
http://www.2cto.com/kf/201402/276737.html

移动端touchend事件不触发解决方案相关推荐

onresize事件会被多次触发_如何修复移动浏览器上 touchend 事件不触发的bug
最近做移动端一个简单的下拉刷新功能,遇到移动端浏览器touchend事件不触发的bug 监听一个 DOM 元素的 touchstart, touchmove, touchend 事件. 如果只是 to ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
安卓手机的touchend事件不触发问题
问题描述 $(document).on("touchstart touchmove",".btn-highlight",function(event){$(th ...
@on-change 事件无法触发解决方案
在用 View UI 的分页功能时,执行 @on-change 函数事件一直无法触发,点击页码时页面不会刷新相关代码如下  <Page :total=&quo ...
sencha touch 在新版谷歌浏览器中painted事件无法触发解决方案以及carousel 控件、togglefield控件、滚动条失效...
在2.3/2.4版本中,新版谷歌浏览器(43.44版本)里面painted事件是不会触发的,以及carousel 控件.togglefield控件.滚动条失效,官方的解决方案如下,测试可用会出现这个 ...
Android的Button按钮，ACTION_UP事件不触发解决方案
在android 编程时,有时候要实现当Button一直按下的时候,执行一些逻辑代码,当按钮弹起的时候,终止这些逻辑代码的执行. 比如在设置页面的滑动开关时,如果不监听ACTION_CANCEL,在 ...
移动端手指事件和手机事件：
文章目录 1.手指事件: 2.touches当前屏幕中的手指列表: 3.重力加速度事件: 4.手机倾斜事件: 5.手机摇一摇: 6.多指旋转: 7.多指缩放: 1.手指事件: <!DOCTYPE ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
Vue 移动端项目百度地图点击事件无效、不触发解决方案
解决百度地图手机端点击事件不触发的一种方案版权声明:本文为博主原创文章,转载请标明原文出处. 问题背景我是半路接手的这个项目,该项目使用 Vue 开发的一款手机端的页面.到手里时,使用百 ...

移动端touchend事件不触发解决方案

移动端touchend事件不触发解决方案相关推荐

最新文章

热门文章