JS 移动端的 Touch 事件使用


当前第2页 返回上一页

手机上也有click事件,从触摸到响应click事件,有会300的毫秒的延迟,原因在于:

"Apple 准备发布iphone的时候,为了解决手机上web页面太小的问题,增加了双击屏幕放大的功能,(double tap to zoom ),当用户触摸屏幕的时候,浏览器不知道用户是要double tap还是要click,所以浏览器在第一次tap事件后会等300ms来判断到底是double tap还是click ,如果在300ms以内点击的话,会以为是double tap,反之是click。"

去掉click事件 300ms 的方法:

(1) 在meta里,加 user-scalable=no 可以阻止双击放大,(缺点: 部分浏览器支持)

(2) 使用fastclick.js 它利用多touchstart touchmove 等原生事件的封装,来实现手机上的各种手势,比如tap, swipe 等,

下载地址 https://github.com/ftlabs/fastclick

调用很简单:

1

2

3

$(function() {

    FastClick.attach(document.body);

});

缺点: 文件量有点大,为了解决一小延迟的问题,有点得不偿失。

自定义事件

1

2

3

4

5

6

7

8

9

// 创建事件对象

 var obj = new Event('sina');

 var elem = document.getElementById('dom');

 //监听sina事件

 elem.addEventListener('sina', function(e){

   console.log(e);

 },false);

 //分发sina事件

 elem.dispatchEvent(obj);

另外一个创建事件对象的方法是通过CustomEvent,相比于Event的好处是,它可以给处理事件的函数,自定义detail值,这在实际开发中,可能会经常用到。

1

2

3

4

5

6

7

8

9

10

11

12

// 创建事件对象

var obj = new window.CustomEvent('sina', {

    detail: {'name': 'lily'}

});

var elem = document.getElementById('dom');

//监听sina事件

elem.addEventListener('sina', function(e){

  // 可以接收到创建事件时,传入的detail值。

  console.log(e. detail);  // {'name': 'lily'}

},false);

//分发sina事件

elem.dispatchEvent(obj);

创建自定义事件,一个兼容性较好的函数:

微信截图_20200521092739.png

zepto tap “点透”问题

Zepto 的tap事件是通过document绑定了touchstart和touchend事件实现,如果绑定tap方法的dom元素在tap方法触发后会隐藏、而“隐藏后,它底下同一位置正好有一个dom元素绑定了click的事件, 而clic事件有300ms延迟,触发click事件。则会出现“点透”现象。

解决方案:

1 fastclick.js

它的实际原理是在目标元素上绑定touchstart ,touchend事件,然后在touchend这个库直接在touchend的时候就触发了dom上的click事件而替换了本来的触发时间,touch事件是绑定到了具体dom而不是document上,所以e.preventDefault是有效的,可以阻止冒泡,也可以阻止浏览器默认事件。

http://www.cnblogs.com/yexiaochai/p/3442220.html

2、利用fastclick的事件原理, 直接写一段, 采用 e.preventDefault(); 阻止“默认行为”,将事件绑定到dom元素上,缺点在于不能使用事件代理。

1

2

3

elem.addEventListener(touchend, function(e){

  e.preventDefault()

},false);

3. 在事件捕获阶段,如果时间差,位置差,均小于指定的值,就阻止冒泡和默认click事件的触发。

微信截图_20200521092759.png

4. 用户点击的时候“弹出”一个顶层DIV,屏蔽掉所有事件传递,然后定时自动隐藏, 这个方法比较巧妙。

推荐教程:《PHP教程》

以上就是JS 移动端的 Touch 事件使用的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

js 定义用字符串拼接的变量的解析

js计算两个日期的月份差的实例解析

浅谈js函数及闭包

手把手教你如何在html中引入外部js文件

js中空字符串的布尔值是false吗?

如何利用js实现水平移动与垂直移动效果

js去除数组中的重复值

关于js中的this指向问题的介绍

js与css的区别是什么

js如何改变css样式

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...