移动web touch事件

wap中的原生touch 事件，touchstart、touchmove、touchend、touchcancel，这些事件仅仅在移动端才会被触发，在pc端无效

click事件在移动端中具有300ms的延迟，所以为了有更好的用户体验，从以上的touch事件中衍生出另一种比click更快响应的事件称为tap事件，tap事件是被包装过的touch事件（由touchstart以及touchend组成），一般150ms内就会被响应，也就是按下到抬起之间不超过150ms的话，就触发tab事件

以上是自己封装tab的思路，其实也可以使用第三方库如zepto，使用里面封装的tab事件。或者使用插件 fastclick

click在移动端有延迟的原因

　　这涉及到移动设备原生的手势交互，双击放大。如何判断是单击还是双击呢？第一次点击后300ms内没有出现第二次点击，则认为是单击，触发click事件。否则触发双击事件。就是因为有这部分判断，所以有300ms的延迟。

点透 / 穿透 现象

时间： 2024-07-31 03:06:36

移动web touch事件的相关文章

移动web——touch事件

基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个时间组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面是测试click在移动web端的延迟,最好在手机浏览器中测试 <script> window.onload = function () { var currentTime = 0; document.body.addEventListener('click', function (ev) { co

web touch 事件

一.触摸事件ontouchstartontouchmoveontouchendontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的: touchstart → mouseover → mousemove → mousedown → mouseup → click1 /*** onTouchEvent*/var div = document.getElementById(“div”);//touchstart类似

web前端中的Touch事件实例

例1.单个手指touch <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> &

移动WEB开发之JS内置touch事件[转]

iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计 出来的.Click事件在iOS上会有半秒左右的延迟,原因是iOS要highlight接收到click的element.而 mouseover/out等事件则会被手指的点击触发.所以,在iOS上,应当抛弃传统的交互事件模型而接受一个新的事件模型.Touch事件和更高级 的Gesture事件,能让你的网页交互起来像n

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

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. ta

web移动端touch事件

1.移动端与pc端的区别 移动端没有鼠标,自然也没有鼠标事件.所以onmousedown之类的事件监听在移动端时无效的. 移动端为了响应双击事件,onclick事件有300ms的延迟,因为要看看接下来的300ms有没有再次点击,有的话视为双击,没有的话视为单击. 延迟300ms只是理论上,实际上每台手机上这个延迟可能会不同,下面的代码可以测试当前手机上onclick事件的延迟 <script> var now document.ontouchstart = function(){ // 返回

JS的Touch事件们

iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 当按下手指时,触发ontou

移动端开发概览【webview和touch事件】

Android vs Ios 我在webkit内核的chrome中进行开发的页面,拿着iPhone和安卓机来进行测试,传说中它们的浏览器内核也是WebKit,那么问题来了,同样的页面为什么在ios中和安卓中表现不同,出现了各种稀奇古怪的bug... 我尝试找下两者的根本区别: - iOS 随着2007年6月29日iPhone的上市,WebKit进入iPhone OS平台,经过Apple的定制,成为iPhone OS平台独一无二的排版引擎: - Android 在旧版本的安卓中: 熟悉Androi

JS的Touch事件们,触屏时的js事件

丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel事件,分别对应了触屏开始.拖拽及完成