资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/[前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

[前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

Cobub / 2185人阅读

摘要：使用实现双击事件例如，这样双击省略参数合法性的判断自定义双击事件可以使用携带数据双击事件监听双击事件触发是否已经点击过一次事件分发使用数组实现双击事件或击事件灵感来自于系统多击触发彩蛋的源码用前端的方式实现长这样双击省略参数合法性的判断创建

使用setTimeout实现双击事件
例如，这样：
</>复制代码 
  1. let div = document.getElementById("div");
  2. doubleClick(div, function (event) {
  3.     console.log("双击")
  4. })
  5. function doubleClick(ele, fn) { // 省略参数合法性的判断
  6.     let event = new Event("doubleClick"); // 自定义双击事件（可以使用CustomEvent携带数据）
  7.     // 双击事件监听
  8.     ele.addEventListener("doubleClick", function (event) {
  9.         fn(event);
  10.     });
  11.     // 双击事件触发
  12.     let timeout;
  13.     let clicked = false; // 是否已经点击过一次
  14.     ele.addEventListener("click", function () {
  15.         if (clicked) {
  16.             clicked = false;
  17.             if (timeout) {
  18.                 clearTimeout(timeout);
  19.             }
  20.             ele.dispatchEvent(event); // 事件分发
  21.         } else {
  22.             clicked = true;
  23.             timeout = setTimeout(function () {
  24.                 clicked = false;
  25.             }, 400);
  26.         }
  27.     });
  28. }
使用数组实现双击事件或n击事件 
</>复制代码 
  1. 灵感来自于Android系统多击触发彩蛋的源码
用前端的方式实现长这样：
</>复制代码 
  1. let div = document.getElementById("div");
  2. multiClick(div, function (event) {
  3.     console.log("双击")
  4. }, 2)
  5. function multiClick(ele, fn, clickNum) { // 省略参数合法性的判断
  6.     let event = new Event("multiClick"); // 创建n击事件（可以使用CustomEvent携带数据）
  7.     let hits = [];
  8.     // n击事件监听
  9.     ele.addEventListener("multiClick", function (event) {
  10.         fn(event);
  11.     });
  12.     // n击事件触发
  13.     ele.addEventListener("click", function () {
  14.         let now = new Date().getTime();
  15.         hits.push(now);
  16.         if (hits.length > 1) {
  17.             if (hits[0] + 500 > now) {
  18.                 if (hits.length === clickNum) {
  19.                     hits = [];
  20.                     ele.dispatchEvent(event); // 事件分发
  21.                 }
  22.             } else {
  23.                 hits.shift();
  24.             }
  25.         }
  26.     });
  27. }
云服务器 GPU云服务器 自定义事件 js 自定义触发事件 DOM事件 js监听鼠标三击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51865.html

相关文章

  • [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    摘要：使用实现双击事件例如，这样双击省略参数合法性的判断自定义双击事件可以使用携带数据双击事件监听双击事件触发是否已经点击过一次事件分发使用数组实现双击事件或击事件灵感来自于系统多击触发彩蛋的源码用前端的方式实现长这样双击省略参数合法性的判断创建 使用setTimeout实现双击事件 例如，这样： let div = document.getElementById(div); doubleC...

    Kerr1Gan 评论0 收藏0

  • “click延时”是怎么来的与自定义tap事件解决“点透”

    摘要：早期版本的的就是如此处理的，自定义事件在中触发，解决单击延时的问题。给按钮绑定事件事件执行自定义事件触发上的事件当然实际中肯定要放在其他的事件回调中，不然没办法响应用户操作。 click延时 在移动设备上按下手指单击，按先后顺序，依次会发生touchstart->-touchmove（如果有的话）>touchend->mousedown->mousemove（如果有的话）->mouse...

    kid143 评论0 收藏0

  • FastClick 源码解读

    摘要：所有浏览器浏览器不支持安卓中中有属性安卓中中有属性有属性的有属性的所以在不需要的浏览器会直接掉，不会执行下面的所有代码。见源码行，可以看出在响应无操作后，则触发。 其实一直就想花些时间读一读那些优秀的开源库，今天终于下了决定打算死磕下自己，2016年每个月读2-3个优秀的开源库，把源码精彩的地方和自己心得分享给大家。 目录 （一）背景（二）源码解析（三）Zepto 点击穿透与 Fast...

    Chaz 评论0 收藏0

  • 如何实现swipe、tap、longTap等自定义事件

    摘要：分别存储事件的定时器。事件定时器延时时间存储事件对象滑动方向判断我们根据下图以及对应的代码来理解滑动的时候方向是如何判定的。取消长按，以及取消所有事件取消长按取消所有事件方式都是类似，先调用取消定时器，然后释放对应的变量，等候垃圾回收。 前言 移动端原生支持touchstart、touchmove、touchend等事件，但是在平常业务中我们经常需要使用swipe、tap、double...

    罗志环 评论0 收藏0

发表评论

登陆后可评论

0条评论

Cobub

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<