zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    设计模式 23
    生活杂谈
    设计模式经典书籍
    ABP 样板开发框架系列
    关键字
    vs 2015
    优秀文章推荐
    Parallel 并行编程
    CSRF
    sql性能优化
  • 原文地址:https://www.cnblogs.com/webu/p/3084133.html
Copyright © 2011-2022 走看看