移动端touch事件和click事件的区别
来源:互联网 发布:ae数据模板 编辑:程序博客网 时间:2024/05/16 09:28
移动端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
js
上面逻辑是给content类名的div,绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下,点击一下,div是先变成绿色然后又变成蓝色。
4.只触发touch事件,不去触发click事件 发现了preventDefault()的方法,阻止事件的默认行为。
通过 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事件浅析
- 广州易显 M0版 19寸串口屏 开放式安装
- Java之XML(二)解析XML
- 面试中的 Singleton
- CURL采集
- 数据结构实验1-线性表的顺序实现
- 移动端touch事件和click事件的区别
- 1
- 使用SVN还原更新,本地没提交代码被覆盖,还有可能找回吗
- framework
- js 刷新页面window.location.reload();
- Codefroces 527D Clique Problem【思维+贪心】
- 解读:如何更有效地学习开源项目的代码?
- Zabbix 系统监控软件
- canvas中 save()和saveLayer()区别