UDN-企业互联网技术人气社区

板块导航

浏览  : 700
回复  : 4

[原生js] 移动端touch事件和click事件的区别

[复制链接]
王许柔的头像 楼主
发表于 2017-1-6 15:15:20 | 显示全部楼层 |阅读模式
  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
  1. <style>

  2. .content{

  3. height:500px;

  4. background:#F00;

  5. }

  6. </style>

  7. <div class="content"></div>
复制代码

  js
  1. var content = document.querySelector(".content");

  2. content.addEventListener("touchend", function(){

  3. content.style.background = "#0F0";

  4. });

  5. content.addEventListener("click", function(){

  6. content.style.background = "#00F";

  7. });
复制代码

  上面逻辑是给content类名的div,绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。

  手机 测试 一下,点击一下,div是先变成绿色然后又变成蓝色。

  4.只触发touch事件,不去触发click事件

  发现了preventDefault()的方法,阻止事件的默认行为。
  1. <span style="color:#333333;">var content = document.querySelector(".content");

  2. content.addEventListener("touchstart", function(ev){

  3. </span><span style="color:#ff0000;"> ev.preventDefault();</span><span style="color:#333333;">

  4. content.style.background = "#0F0";

  5. })

  6. content.addEventListener("click", function(ev){

  7. content.style.background = "#00F";

  8. });</span>
复制代码

  通过 preventDefault()方法,可以阻止后面事件的触发。

相关帖子

发表于 2017-1-6 15:15:52 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2017-1-6 15:57:07 | 显示全部楼层
学习
使用道具 举报

回复

发表于 2017-1-10 03:50:14 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部