移动端WEB开发，click,touch,tap事件

素颜马尾好姑娘i 2022-07-19 11:49 317阅读 0赞

1、click 和 tap 事件比较

  1.  两者都会有点击时触发，但是在手机WEB端，click会有200~300ms的延迟，所以用zepto的tap代替click作为点击事件
  3.  singleTap 和doubleTap 分别边上单击事件和双击事件。

2、关于tap事件的点透处理

  1. （1） 在使用zepto框架的tap来作为移动设备浏览器的点击事件来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件，并传递事件。
  3.  处理方式：
  5.       使用FastClick 库   https://github.com/ftlabs/fastclick 
  7.       引入FastClick 库，并添加： 
  9.       $(function()\{
  11.         new FastClick(document.body);
  13.     \});
  15.   然后给需要“无延迟点击”的元素绑定click事件，注意不再是绑定zepto的tap事件
  17.  当然，也可以不再body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受无延迟的点击
  19.  当元素绑定Fastclick后，click响应速度比tap还要快。 （没有触发dom的click事件，new 一个 Event支持冒泡的事件，如果是click的话，则隐式调用声明的方法）
  21. （2）为元素绑定touchend事件，并在内部添加e.preventDefault() 方法
  23.      $el.on('touchend',function(e)\{
  25.          e.preventDefault();
  27.         //do some thing
  29.      \});

3、 touch事件touch是针对触屏手机上的触屏事件

  1. touchstart ： 当手指触摸到屏幕会触发
  3. touchmove： 当手指在屏幕上移动时会触发
  5. touchend ：当手指离开屏幕时会触发
  7. touchcancel:： 当手指还没有离开屏幕，有系统的操作。

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

    相关 web开发中移动端适配

    这个话题有些复杂，说起来有些琐碎，因为和移动端适配相关的问题太多了。 1. 概念 1.1 设备像素 设备像素被称为物理像素，它是显示设备中一个最小的物理部件。每个像素可以

    桃扇骨桃扇骨/ 0 赞/ 153 阅读

    相关 移动端keyup事件

    最近在做一个项目需求，需要实现一个类似谷歌搜索的功能，可以模糊匹配到中文和字母。当时想到了keyup事件，每当键盘按下时监控input框值的变化，在电脑和安桌手机上测试都没有问

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 392 阅读