专栏首页web开发移动端web开发,click touch tap区别

移动端web开发,click touch tap区别

移动端用tap时会有穿透问题

一:click与tap比较

click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击

二:tap的穿透处理

使用zepto框架的tap的点击事件,来规避click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件。

三:穿透原因

问题:在HTML5点击了q以后,弹出b的弹框

因为tap事件是通过document绑定了touchstart和touchend事件实现,$('.q')上,当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面

现在touchend冒泡到了document上,并且$('.b')在页面的最前面,然后就触发了click事件

四:解决穿透问题

1.github上有一个叫做fastclick的库,它能规避移动设备上click事件的延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持AMD,可按照AMD规范,用require.js的模块加载器引入),并且在dom  ready时初始化在body上,如:

$(function(){

new FastClick(document.body);

})

然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。

也可以不在body上初始化它,而在某个dom上初始化,这样,只有设个dom和它的子元素才能享受"无延迟"的点击

实践开发中,当元素绑定fastclick后,click响应速度比tap还要快一点。

2.为元素绑定touchend事件,并在内部加上e.preventDefault();

$demo.on('touchend',function(e){

//改变了事件名称,tap是body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发

$demo.hide();

e.preventDefault();//阻止“默认行为”

});

五:touch事件

touch是针对触屏手机上的触摸事件。现金大多数触屏手机webkit内核提供了touch事件的监听

包含:touchstart touchmove touchend touchcancel四个事件

touchstart touchmove touchend事件可以类比于mousedown mouseover mouseup的触发

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web前端几个小知识点笔记

    1、css实现宽度是百分比的盒子为正方形 <div style="width:50%;padding-bottom:50%;height:0px;backgro...

    用户1174387
  • VUE路由去除#问题

    最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发...

    用户1174387
  • 初识NodeJS

    1.JavaScript 模块化规范 浏览器环境 AMD Asynchronous Module Definition RequireJS CMD Com...

    用户1174387
  • Web前端学习 第8章 egg基础教程7 Nunjucks入门教程

    学习猿地
  • 跟着案例学Python—入门基础篇

    Python 是由 Guido van Rossum 在八十年代末和九十年代初,在荷兰国家数学和计算机科学研究所设计出来的。Python是免费的开源软件,是一门...

    机器思维研究院
  • 【融职培训】Web前端学习 第8章 egg基础教程7 Nunjucks入门教程

    学习猿地
  • Python3 与 NetCore 基础语法对比(就当Python和C#基础的普及吧)

    VSCode设置python3的开发环境(linux下默认是python2)https://www.cnblogs.com/dotnetcrazy/p/9095...

    逸鹏
  • 青少年编程:用Python探究数学(2)

    在上一篇中,绘制了一个正方形,但是,其中要不断重复某些语句。幸亏是正方形,如果是更多边的图形,重复就更多了。在Python语言中,为了让重复的事情做起来不那么烦...

    老齐
  • 2015.12.03 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及昨日题目的解答,以及一道涉及计时器、时间对象的题目。 HTML5真题【2015.12.02】答案解析 昨日真...

    HTML5学堂
  • WPF效果第一百一十七篇之Slider

    有朋友私信我让我给他分享一下关于Slider控件的模板;正好今晚没啥大事,就临时加个班做了个很基础的小demo给大家分享出来;来看最终效果吧:

    WPF程序员

扫码关注云+社区

领取腾讯云代金券