转载,并非原创;
原文地址: http://blog.csdn.net/lululove19870526/article/details/44345759
移动端touch事件和click事件的区别
1.touch事件
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象
2.touch事件和click事件的区别
在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。
touchstart和click的触发条件就有区别,对于手持设备的浏览器:
1.touchstart:在这个dom(或冒泡到这个dom,这当然是废话)上手指触摸开始即能触发2.click:在这个dom(或冒泡到这个dom,这当然是废话)上手指触摸开始,且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值),且在这个在这个dom上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发
于是我们可以看到,完全用touchstart代替是不太可取的,但是click在移动手持设备上带来的延迟也是一个问题
3.验证touchstart和click事件,看谁先触发。
html
- <style>
- .content{
- height:500px;
- background:#F00;
- }
- </style>
- <div class="content"></div>
js
- var content = document.querySelector(".content");
- content.addEventListener("touchend", function(){
- content.style.background = "#0F0";
- });
- content.addEventListener("click", function(){
- content.style.background = "#00F";
- });
上面逻辑是给content类名的div,绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下,点击一下,div是先变成绿色然后又变成蓝色。
4.只触发touch事件,不去触发click事件 发现了preventDefault()的方法,阻止事件的默认行为。
- <span style="color:#333333;">var content = document.querySelector(".content");
- content.addEventListener("touchstart", function(e){
- </span><span style="color:#ff0000;"> e.preventDefault();</span><span style="color:#333333;">
- content.style.background = "#0F0";
- })
- content.addEventListener("click", function(e){
- content.style.background = "#00F";
- });</span>
相关推荐
百度 touch js 百度touch.js可以说是Web移动端touch点击事件不错的解决方案,搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。
因为移动端设备上的click事件触发是会延迟300ms,所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次,这样毫无意义。这里提醒下,PC是无法识别touch相关事件 二、解决方式 (1)...
在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件。 为什么这样效果...
主要介绍了vue中touch和click共存的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指...
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指...
移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup、keydown)…TOUCH事件模型(处理单手指操作)、GESTURE事件模型(处理多手指操作) TOUCH:touchstart、touchmove、touchend、...
zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题。 于是乎,...
但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。 当按下手指时,触发ontouchstart...
function touch(elem,type,handler){ var types=['click','dbclick','press','slider']; var index=-1;//用于判断type是否合法 for(var i=0;i10||Math.abs(point.changeY)>10){ point.ismove=true; } }) elem...
PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。 下面是移动端手指滑动轮播图的完整代码。 <!DOCTYPE html> <html> <...