触摸事件(touch)事件简述

2019-04-09230次阅读javascript

最近做了一个需求总共只有两屏,要求首屏触摸滑动到第二屏时就要取消触摸滑动事件。一般来说移动端网站的内容触摸滑动我们都会选择不依赖框架的Swiper来实现,但考虑到小需求下我们就没有必要去使用它,正好借这个机会去了解一下touch事件。

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

  • touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
  • touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
  • touchend事件:当手指从屏幕上离开的时候触发。

触摸事件下面有三个用于跟踪触摸的属性:

  • touches:表示当前跟踪的触摸操作的touch对象的数组。
  • targetTouches:特定于事件目标的Touch对象的数组。
  • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下:

clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触目的DOM节点目标。

var ele = doc.querySelector('.screnn_0'),//触摸的Dom对象

    start = {},//touchstart当手指触摸屏幕时候存放最后的x、y坐标值

    end = {};//touchend当手指从屏幕上离开的时候存放最后的x、y坐标值

ele.addEventListener('touchstart',function(event){

    var touch = event.changedTouches[0];

    start = {

        y : touch.clientY
    }

}, false );


ele.addEventListener('touchend',function(event){

    var touch = event.changedTouches[0];

    end = {

        y : touch.clientY
    }

    var z = end.y - start.y;

    if(z < 0 && (Math.abs(z) > 100)  ){

        //nextStep(); 执行操作的方法

    }
  

}, false );

touchend的最后坐标减去touchstart的起始坐标。

  1. y的结果如果正数,则说明手指是从上往下划动;

  2. y的结果如果负数,则说明手指是从下往上划动;

Math.abs(x)取得正数和负数的绝对值,来判断滑动的距离。

横向划动就是X坐标,就以上面的例子以此类推即可。

上一篇: 多行文本显示省略号  下一篇: sass @for循环  

触摸事件(touch)事件简述相关文章