js的左右滑动触屏事件

转载 2013年12月02日 15:12:42

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.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。

移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功。 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5   测试了三个事件:touchstart、touch...
  • zht666
  • zht666
  • 2013年02月28日 11:57
  • 104286

移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功。 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5   测试了三个事件:touc...
  • zljjava
  • zljjava
  • 2014年08月29日 00:59
  • 4854

移动端js手指滑动事件初体验

今天在公司遇到做一个移动端手指滑动的效果,刚开始用了swiper.js插件发现效果不好(文字存在模糊效果)。后来查了一些资料,自己手写了一个使用原生js写的滑动效果。 下面直接上代码: ...

移动web最简洁的滑动效果Swipe JS(适合初学者)

之前一直都是后台开发,最近要做一个前台相关的项目,

js案例 移动端左右滑动touch+transform

*{ padding: 0; margin: 0; /*margin-top:100px;*/ } #move{ height: 80px; wid...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

原生js左右滑动

.box{                width:100%;              height: 100%;            position: fixed;         ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Unity3d 触屏手机滑动事件(上下左右方向精确判断)

2017-07-05 更新 添加了一个滑动距离 不然手指刚刚触碰上去就开始判断了滑动 我个人默认距离是80 滑动距离超过80的时候才开始执行方法...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js的左右滑动触屏事件
举报原因:
原因补充:

(最多只允许输入30个字)