var touchEvent={

        /*单次触摸事件*/
tap:function(element,fn){
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 ){
fn();
}
}, false );
}, /*两次触摸事件*/
doubleTap:function(element,fn){
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;
fn();
}
}
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;
fn();
},400);
}
}
else{
firstTouchEnd = true;
}
}, true );
// iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
element.addEventListener( 'click', function( e ){
if(dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
}, /*长按事件*/
longTap:function(element,fn){
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(){
fn();
}, 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:function(element,fn){
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)>20||Math.abs(distanceY)>20 ){
fn();
}
}, false );
}, /*向上滑动事件*/
swipeUp:function(element,fn){
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( distanceY > 20 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向下滑动事件*/
swipeDown:function(element,fn){
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( distanceY < -20 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向左滑动事件*/
swipeLeft:function(element,fn){
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 ){
fn();
isSwipe = true;
}
}
}, false );
}, /*向右滑动事件*/
swipeRight:function(element,fn){
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 ){
fn();
isSwipe = true;
}
}
}, false );
} }

http://www.qdfuns.com/notes/15800/552b6a805cb97074e6501938096f57bc.html

手机端touch事件封装的更多相关文章

  1. 手机端touch事件 jquery模拟

    ontouchstart实现手机触屏中的hover效果 ontouchstart实现手机触屏中的hover效果 最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟 ...

  2. 通过html5 touch事件封装手势识别组件

    html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...

  3. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  4. 手机端js事件支持(event)

    http://blog.163.com/rex_blog/blog/static/1944801012013102743014369/ 所有被测试的浏览器都支持touchstart.touchend和 ...

  5. html 手机端click 事件延迟问题(fastclick.js使用方法)

    下载地址: fastclick.js 为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击 ...

  6. html 手机端click 事件去掉黑色阴影效果

    添加css样式 html{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 1.  -web ...

  7. JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  8. 移动web touch事件

    参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html wap中的原生touch 事件,touchstart.touchmove.touchend.touc ...

  9. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

随机推荐

  1. Qt贴图实现地图标记效果

    #include "wgtmap.h" #include "ui_wgtmap.h" #include <QPainter> #define IMG ...

  2. python 文件的打开与读取

    python 文件的打开与读取 其实网上其他人写的都挺好的,我也是看他们的.办公室用的2.7.笔记本用的3.6.发现没有file 类,尴尬了 with open(r'C:\Users\HBX\Docu ...

  3. VMware 安装 centos,自定义分区

    具体查看:https://jingyan.baidu.com/album/6525d4b1799149ac7d2e9483.html?picindex=11

  4. 2.python函数编程-filter函数

    fileter功能主要使用在需要对数据进行多种操作,并对数据进行过滤的操作. 普通函数实现: movie = ['sb_alex', 'wupei', 'tiger', 'goosb','xxfd', ...

  5. learning ddr tRP and tRP tRTP CL tRAS

    referce :https://blog.csdn.net/ghostyu/article/details/7728106 tRP(RAS Precharge Time): “内存行地址控制器预充电 ...

  6. Vue + Element UI 实现权限管理系统(优化登录流程)

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

  7. day04控制流程之if判断

    一.控制流程之if判断 1.什么是if判断 判断一个条件如果成立则...不成立则... 2.为何要有if判断 让计算机能够像人一样具有判断能力 3.如何用if判断 ''' # 语法1: ''' if ...

  8. [AtCoder2558]Many Moves

    Problem 共有n个格子,有两个硬币在a,b格子上,还有q个操作. 每个操作给你一个编号,要求将一个硬币移到这个编号上. 问你硬币移动的总距离最小值. Solution O(n^3):DP[i][ ...

  9. oracle sqlserver mysql 通过sql查看表及字段注释

    oracle: SELECT A.TABLE_NAME,A.COMMENTS,B.COLUMN_NAME,B.COMMENTS FROM USER_TAB_COMMENTS A,USER_COL_CO ...

  10. hdu 1057 A + B Again

    A + B Again Problem Description There must be many A + B problems in our HDOJ , now a new one is com ...