关键词:
在触屏设备上,一些比较基础的手势都需要通过对 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,需要的朋友看看吧~
什么是移动前端开发
...发技术。web平台的规范是键盘+鼠标,开发技术是html+css+javascript;移动设备平台的规范是键盘+手指(触摸和手势),技术iphone是Objective-C,android是java。业界很少有说移动web前端开发的,都是移动web开发.而webapp特指的是用html5技... 查看详情
web移动端开发使用啥框架比较好?
...包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。支持包括iPhone、Android等手机。 3、DHTMLXTouch DHTMLXTouch是一个免费的HTML5/JavaScript框架,专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应... 查看详情
精通javascript--10移动设备javascript开发
代码清单10-3 访问来自触摸传感器的数据1//在页面上创建一个<p>元素,用以显示当前屏幕上的接触总数量2vartouchCountElem=document.createElement("p");34//定义一个事件处理函数。当一个与接触相关的事件发生时,执行此函数5functio... 查看详情
移动web开发之像素和dpr详解
...(CSSpixels):又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层 每一个CSS声明和几乎所有的javascript属性都使用CSS像素,因此实际上从来用不上设备像素, 查看详情
移动web开发--css像素设备独立像素设备像素之间关系
...像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢?概念CSS像素(CSSPixel):适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概... 查看详情
从为移动设备开发的相同代码库为 Flutter Web 开发单独的 UI
】从为移动设备开发的相同代码库为FlutterWeb开发单独的UI【英文标题】:DevelopingaseparateUIforflutterwebfromsamecodebasedevelopedformobile【发布时间】:2021-08-2105:49:12【问题描述】:我已经使用Flutter开发了一个移动应用程序,它可以在ios和... 查看详情
开发移动端页面
...CSS像素,而设备像素无论大小还是数量都是不变的。二、移动端的三个视口布局视口:移 查看详情
移动端和pc端,响应式设计布局
...式Web设计只使用HTML和CSS。响应式Web设计不是一个程序或Javascript脚本。2.响应式的作用:设计最好的用户体验 友好的用户体验是网页可以在任何设备上展示和操作,设备包括桌面系统设备,平板电脑,iPhone等手机等。网页应... 查看详情
移动web开发笔记(代码片段)
移动web开发笔记移动web开发笔记基础概念像素单位CSSpixels与devicepixelsCSSpixelsPPIDPIdevicePiexelRatio文字大小控制viewport响应式布局原则实现方式布局方案百分比布局流体布局弹性flexible布局flex-box布局图片处理普通设置响应式图片媒体... 查看详情
移动端web怎么循序渐进地开发一个移动端页面
1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础,那么到底什么才是一个像素呢?像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念,实际上,Web前端开发领域,像素... 查看详情
html5移动开源框架都有哪些
...包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。支持包括iPhone、Android等手机。 3、DHTMLXTouch DHTMLXTouch是一个免费的HTML5/JavaScript框架,专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应... 查看详情
leaflet--建设移动设备友好的互动地图
...建设移动设备友好的互动地图,而开发的现代的、开源的JavaScript库。它是由VladimirAgafonkin带领一个专业贡献者团队开发,尽管代码仅有33KB,但它具有开发者开发在线地图的大部分功能。Leaflet是一个为建设移动设备友好的互动地... 查看详情
leaflet--建设移动设备友好的互动地图
...建设移动设备友好的互动地图。而开发的现代的、开源的JavaScript库。它是由VladimirAgafonkin带领一个专业贡献者团队开发。尽管代码仅有33KB,但它具有开发者开发在线地图的大部分功能。Leaflet是一个为建设移动设备友好的互动地... 查看详情
移动设备上的 Javascript 分析
】移动设备上的Javascript分析【英文标题】:Javascriptprofilingonmobiledevices【发布时间】:2012-01-2515:33:18【问题描述】:我正在寻找能够在移动设备上执行网站分析的工具,类似于Firebug和Chrome开发工具所允许的。我用过Weinre相当广泛... 查看详情
移动端web开发框架
一、目前移动端布局方法两个基本规则:移动优先,设计初期就要考虑设计的页面如何多终端显示。渐进增强,充分发挥硬件设备的最大功能。三个常用方法: 1)css3-media Query(最简单,最基本) &n... 查看详情
移动web开发之响应式布局(代码片段)
文章目录一、响应式开发原理1.1响应式开发原理1.2响应式布局容器二、bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3bootstrap布局容器2.4bootstrap栅格系统总结一、响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设... 查看详情
响应式移动 Web 开发的加载速度。
】响应式移动Web开发的加载速度。【英文标题】:Loadspeedsforresponsivemobilewebdevelopment.【发布时间】:2017-10-0421:54:07【问题描述】:我准备在这里使用我们的网站并使其完全响应移动设备,从而摆脱我们的m.网站。我可能会使用Boots... 查看详情
java示例代码_检测java中对REST服务器的调用是否来自移动设备
java示例代码_检测java中对REST服务器的调用是否来自移动设备 查看详情