打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
js的左右滑动触屏事件

js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是pageX和 pageY,表示X,Y坐标。

touchstart在触摸开始时触发事件

touchend在触摸结束时触发事件

touchmove这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart-> touchmove ->touchmove-> … -> touchmove->touchend。

下面是一段代码实例:

document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function (e) {
       nStartY = e.targetTouches[0].pageY;
       nStartX = e.targetTouches[0].pageX;
    });

document.getElementsByTagName_r('body')[0].addEventListener('touchend',function (e) {
       nChangY = e.changedTouches[0].pageY;
       nChangX = e.changedTouches[0].pageX;

PS:1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好,已经把这个问题完美的避免掉了。

2.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。

附上苹果官方的事件文档。http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HTML5触摸事件演化tap事件介绍
jquery获取当前元素的坐标
JS移动客户端
HTML5 手势检测原理和实现 双击 单击
指尖下的js ——多触式web前端开发之一:对于Touch的处理
移动端 滑动touchstart touchmove touchend
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服