javascript移动设备Web开发中对touch事件的封装实例_javascript技巧

在触屏设备上，一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现。
zepto 是移动端上使用率比较高的一个类库，但是其 touch 模块模拟出来的一些事件存在一些兼容性问题，如 tap 事件在某些安卓设备上存在事件穿透的 bug，其他类型的事件也或多或少的存在一些兼容性问题。

于是乎，干脆自己动手对这些常用的手势事件进行了封装，由于没有太多真实的设备来进行测试，可能存在一些兼容性问题，下面的代码也只是在 iOS 7、Andorid 4 上的一些比较常见的浏览器中测试通过。

tap事件

tap 事件相当于 pc 浏览器中的 click 效果，虽然在触屏设备上 click 事件仍然可用，但是在很多设备上，click 会存在一些延迟，如果想要快速响应的 “click” 事件，需要借助 touch 事件来实现。

复制代码 代码如下:

var startTx, startTy;

element.addEventListener( 'touchstart', function( e ){
  var touches = e.touches[0];

  startTx = touches.clientX;
  startTy = touches.clientY;
}, false );

element.addEventListener( 'touchend', function( e ){
  var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY;

  // 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时的事件坐标会出现一点点变化
  if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
    console.log( 'fire tap event' );
  }
}, false );

doubleTap事件

doubleTap 事件是当手指在相同位置范围内和极短的时间内两次敲击屏幕时触发的事件。在部分浏览器下，doubleTap 事件会选中文本，如果不希望选中文本，可以给元素添加 user-select:none 的 css 属性。

复制代码 代码如下:

var isTouchEnd = false,
  lastTime = 0,
  lastTx = null,
  lastTy = null,
  firstTouchEnd = true,
  body = document.body,
  dTapTimer, startTx, startTy, startTime;

element.addEventListener( 'touchstart', function( e ){
  if( dTapTimer ){
    clearTimeout( dTapTimer );
    dTapTimer = null;
  }

  var touches = e.touches[0];

  startTx = touches.clientX;
  startTy = touches.clientY;  
}, false );

element.addEventListener( 'touchend', function( e ){
  var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY,
    now = Date.now(),
    duration = now - lastTime;

  // 首先要确保能触发单次的 tap 事件
  if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
    // 两次 tap 的间隔确保在 500 毫秒以内
    if( duration < 301 ){
      // 本次的 tap 位置和上一次的 tap 的位置允许一定范围内的误差
      if( lastTx !== null &&
        Math.abs(lastTx - endTx) < 45 &&
        Math.abs(lastTy - endTy) < 45 ){

        firstTouchEnd = true;
        lastTx = lastTy = null;
        console.log( 'fire double tap event' );
      }
    }
    else{
      lastTx = endTx;
      lastTy = endTy;
    }
  }
  else{
    firstTouchEnd = true;
    lastTx = lastTy = null;
  }

  lastTime = now;
}, false );

// 在 iOS 的 safari 上手指敲击屏幕的速度过快，
// 有一定的几率会导致第二次不会响应 touchstart 和 touchend 事件
// 同时手指长时间的touch不会触发click

if( ~navigator.userAgent.toLowerCase().indexOf('iphone os') ){

  body.addEventListener( 'touchstart', function( e ){
      startTime = Date.now();
  }, true );

  body.addEventListener( 'touchend', function( e ){
      var noLongTap = Date.now() - startTime < 501;

      if( firstTouchEnd ){
          firstTouchEnd = false;
          if( noLongTap && e.target === element ){
              dTapTimer = setTimeout(function(){
                  firstTouchEnd = true;
                  lastTx = lastTy = null;
                  console.log( 'fire double tap event' );
              }, 400 );
          }
      }
      else{
          firstTouchEnd = true;
      }
  }, true );

// iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
element.addEventListener( 'click', function( e ){
  if( dTapTimer ){
    clearTimeout( dTapTimer );
    dTapTimer = null;
    firstTouchEnd = true;
  }
}, false );

}

longTap事件

longTap 事件是当手指长时间按住屏幕保持不动时触发的事件。

复制代码 代码如下:

var startTx, startTy, lTapTimer;

element.addEventListener( 'touchstart', function( e ){
  if( lTapTimer ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }

  var touches = e.touches[0];

  startTx = touches.clientX;
  startTy = touches.clientY;

  lTapTimer = setTimeout(function(){
    console.log( 'fire long tap event' );
  }, 1000 );

  e.preventDefault();
}, false );

element.addEventListener( 'touchmove', function( e ){
  var touches = e.touches[0],
    endTx = touches.clientX,
    endTy = touches.clientY;

  if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }
}, false );

element.addEventListener( 'touchend', function( e ){
  if( lTapTimer ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }
}, false );

swipe事件

swipe 事件是当手指在屏幕上滑动后触发的事件，根据手指滑动的方向又分为 swipeLeft (向左)、swipeRight (向右)、swipeUp (向上)、swipeDown (向下)。

复制代码 代码如下:

var isTouchMove, startTx, startTy;

element.addEventListener( 'touchstart', function( e ){
  var touches = e.touches[0];

  startTx = touches.clientX;
  startTy = touches.clientY;
  isTouchMove = false;
}, false );

element.addEventListener( 'touchmove', function( e ){
  isTouchMove = true;
  e.preventDefault();
}, false );

element.addEventListener( 'touchend', function( e ){
  if( !isTouchMove ){
    return;
  }

  var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY,
    distanceX = startTx - endTx
    distanceY = startTy - endTy,
    isSwipe = false;

  if( Math.abs(distanceX) >= Math.abs(distanceY) ){
    if( distanceX > 20 ){
      console.log( 'fire swipe left event' );
      isSwipe = true;
    }
    else if( distanceX < -20 ){
      console.log( 'fire swipe right event' );   
      isSwipe = true;
    }
  }
  else{
    if( distanceY > 20 ){
      console.log( 'fire swipe up event' );       
      isSwipe = true;
    }
    else if( distanceY < -20 ){
      console.log( 'fire swipe down event' );        
      isSwipe = true;
    }
  }

  if( isSwipe ){
    console.log( 'fire swipe event' );
  }
}, false );

上面模拟的事件都封装在 MonoEvent 中了。完整代码地址：https://github.com/chenmnkken/monoevent，需要的朋友看看吧~

 PS：这里再为大家推荐一款关于JS事件的在线查询工具，归纳总结了JS常用的事件类型与函数功能：

javascript事件与功能说明大全：

http://tools.jb51.net/table/javascript_event

时间： 2025-01-26 07:22:38

javascript移动设备Web开发中对touch事件的封装实例_javascript技巧的相关文章

JavaScript实现跨浏览器的添加及删除事件绑定函数实例_javascript技巧

本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************

WEB 前端开发中防治重复提交的实现方法_javascript技巧

web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性.而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦.下面就来讲讲如何有效避免前端的表单重复提交 表单提交有以下几种方式: <form name="form" method="post" action=&qu

JavaScript中发布/订阅模式的简单实例_javascript技巧

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式).可在<Javascript设计模式>一书中,这两种模式还是有些区别的.书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系.

js的touch事件的实际引用_javascript技巧

一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐(当然也可能是我对jquery的理解不够),而js只需几步简单定义即可. 由于对js的了解比较少,最简单的应用我都试了很久--下面就分享下js的touch事件的实际引用: $(function(){ document.addEventListener("touchm

Javascript和Java获取各种form表单信息的简单实例_javascript技巧

大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下:  <form action="input.do" name="formkk">   

基于javascript实现单选及多选的向右和向左移动实例_javascript技巧

本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例.分享给大家供大家参考.具体实现方法如下: 方法 一: <body> <h1>实现单选及多选的向右和向左移动</h1> <div id="lst"> <span> <select id="lselect" size="10" multiple="multiple" style="w

详解js中class的多种函数封装方法_javascript技巧

本文实例讲解了js中class的多种函数封装方法,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于class的多种函数封装</title> <style> body{ margin: 0; } li{ height: 20px; } </style

js 声明数组和向数组中添加对象变量的简单实例_javascript技巧

数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

js中遍历Map对象的简单实例_javascript技巧

实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j