移动端WEB开发中click,touch,tap事件怎么使用-创新互联

这篇文章主要介绍移动端WEB开发中click,touch,tap事件怎么使用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

十多年的酉阳土家族苗族网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整酉阳土家族苗族建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“酉阳土家族苗族网站设计”,“酉阳土家族苗族网站推广”以来，每个客户项目都认真落实执行。

一、click 和 tap 比较

两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。

处理方式：

（1）、

github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

$(function(){
    newFastClick(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击

实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。哈哈

（2）、为元素绑定touchend事件，并在内部加上e.preventDefault();

$demo.on('touchend',function(e){//改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件可以类比于mousedown，mouseover
，mouseup的触发。

touchstart ： 当手指触摸到屏幕会触发；

touchmove : 当手指在屏幕上移动时，会触发；

touchend : 当手指离开屏幕时，会触发；

而touchcancel许多人不知道它在什么时候会被触发而忽略它，其实当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗。

这4个事件的触发顺序为：

touchstart -> touchmove
-> …… -> touchmove ->touchend

但是单凭监听上面的单个事件，不足以满足我们去完成监听在触屏手机常见的一些手势操作，如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。

其实市面上很多框架都针对手机浏览器封装了这些手势，例如jqmobile、zepto、jqtouch，不过悲剧发生了，对于某些android系统（我自己测试到的在android 4.0.x），touchmove和touchend事件不能被很好的触发，举例子说明下：

比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove
，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart
差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暂时我只发现在android 4.0会有这个bug，据说 ios 3.x的版本也会有。

而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响，所以在直接使用这些框架的event时，或多或少会出现兼容性问题！

以上是“移动端WEB开发中click,touch,tap事件怎么使用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：移动端WEB开发中click,touch,tap事件怎么使用-创新互联
文章路径：http://cxhlcq.cn/article/dspseo.html