移动端touch事件和click事件的区别
来源:互联网 发布:算法的乐趣 源代码 编辑:程序博客网 时间:2024/05/05 03:23
移动端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>通过 preventDefault()方法,可以阻止后面事件的触发。
0 0
- 移动端touch事件和click事件的区别
- 移动端touch事件和click事件的区别
- 移动前端—touch事件与click事件的区别
- 移动端touch事件影响click事件
- 移动端touch事件影响click事件的相关解决方法
- 移动端-click、touch、tap、swipe事件
- Android中touch和click事件的区别
- 移动端click时间、touch事件、tap事件详解
- 移动端click时间、touch事件、tap事件详解
- 移动端的click事件
- Android touch事件、click事件、focus、selected的区别
- tap,touch,touchstart事件与click事件的区别
- 移动端触发touch事件同时触发click事件的相关解决方法
- 关于 Touch事件和Click事件的冲突问题
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- eclipse老是building workspace及自动更新问题,eclipse加速
- GDUT决赛 - Problem B: 完美串(DP`LCS)
- Stl List使用
- 使用ownCloud在Linux安装你的个人云服务
- 快速排序
- 移动端touch事件和click事件的区别
- 关于mongodb ,redis,memcache之间见不乱理还乱的关系和作用
- split 文件切割函数
- Result Maps collection does not contain value for
- BZOJ 3533 Sdoi2014 向量集 线段树+凸包+三分
- Java程序内存分析:使用mat工具分析内存占用
- 第二周--课后实践:阅读程序(1)
- insert小细节,大问题
- 如何在spark-shell命令行执行spark hql