【移动端】封装一个简单的tap事件鸭

缺乏、安全感 2022-01-06 13:21 297阅读 0赞

1. tap事件与click事件

移动端click事件缺陷

  • 移动端也有click事件，但是在移动端为了区别是点击还是滑动（当用户触碰到屏幕的时候，可能是点击，也可能是活动），因此click事件有300ms的延迟。这个延迟在chrome浏览器模拟器中体现不到300ms的效果，只有在真机上才有。
  • 响应太慢，影响用户体验

tap事件

  • tap事件不是移动端原生事件，而是通过touch相关事件衍生（封装）过来的。

  • tap事件的关键：不触发滑动事件，响应在150ms内

    <!DOCTYPE html>

    1. <meta charset="UTF-8">
    2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    3. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    4. <title>Document</title>
    5. <style>
    6.     *{
    7.         margin: 0;
    8.         padding: 0;
    9.     }
    10.     .box{
    11.         width: 200px;
    12.         height: 200px;
    13.         background-color: hotpink;
    14.     }
    15. </style>





发表评论

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

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

相关阅读

    相关 移动端keyup事件

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

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