网页制作用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

admin 前端开发 2021-05-25 09:27:24 前端 javascript 手势库组件化 Flick事件

后台-系统设置-扩展变量-手机广告位-内容正文底部

9WP9xeD3x5A

前端《组件化系列》目录

「一」用 JSX 建立组件 Parser（解析器）
「二」使用 JSX 建立 Markup 组件风格
「三」用 JSX 实现 Carousel 轮播组件
「四」用 JavaScript 实现时间轴与动画
「五」用 JavaScript 实现三次贝塞尔动画库 - 前端组件化
「六」用 JavaScript 实现手势库 - 实现监听逻辑
「七」用 JavaScript 实现手势库 — 手势逻辑
「八」用 JavaScript 实现手势库 — 支持多键触发
「九」用 JavaScript 实现手势库 — 事件派发与 Flick 事件《本期》
… 待续 …

我们上一期已经实现了所有的 gesture（手势），接下来我们需要实现的就是事件派发的功能。

事件派发

在 DOM 里面事件的派发是使用 new Event ，然后在上面加一些属性，最后把这个事件给派发出去的。

所以我们这里也是一样，建立一个 dsipatch 的函数，并且加入 type、property 这些参数。这里的 property 含有 context 对象和 point 坐标两个属性。

在我们的 dispatch 函数中，首先我们需要做的就是创建一个 event 对象。在新的浏览器 API 中，我们可以直接使用 new Event 来创建。当然我们也可以使用自定义事件来创建 new CustomEvent。那么我们这里，就用普通的 new Event 就好了。

function dispatch(type, properties) {
  let event = new Event(type);
}

然后我们循环一下 properties 这个对象，把里面的属性都抄写一下。然后我们新创建的 event 是需要挂在一个元素上面，把它挂在到我们之前定义的 element 上即可。

function dispatch(type, properties) {
  let event = new Event(type);
  for (let name in properties) {
    event[name] = properties[name];
  }
  element.dispatchEvent(event);
}

这里其实还有一个问题，就是我们之前写的监听都是挂载在 element 之上的。最后我们要把这些都换成挂载在 document 上。

element.addEventListener('mousedown', event => {
  let context = Object.create(null);
  contexts.set(`mouse${1 << event.button}`, context);

  start(event, context);

  let mousemove = event => {
    let button = 1;

    while (button <= event.buttons) {
      if (button & event.buttons) {
        let key;
        // Order of buttons & button is not the same
        if (button === 2) {
          key = 4;
        } else if (button === 4) {
          key = 2;
        } else {
          key = button;
        }

        let context = contexts.get('mouse' + key);
        move(event, context);
      }
      button = button << 1;
    }
  };

  let mouseup = event => {
    let context = contexts.get(`mouse${1 << event.button}`);
    end(event, context);
    contexts.delete(`mouse${1 << event.button}`);

    if (event.buttons === 0) {
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);
      isListeningMouse = false;
    }
  };

  if (!isListeningMouse) {
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    isListeningMouse = true;
  }
});

然后我们来把 end 函数中的 tap 事件 dipatch（派发）出来试试：

let end = (point, context) => {
  if (context.isTap) {
    //console.log('tap');
    // 把原先的 console.log 换成 dispatch 调用
    // 这个事件不需要任何特殊属性，直接传`空对象`即可
    dispatch('tap', {})
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    console.log('pan-end');
  }

  if (context.isPress) {
    console.log('press-end');
  }
};

那么最后，我们可以尝试在 HTML 中加入一个脚本，在里面监听一下我们新创建的 tap 事件。

<script src="gesture.js"></script>
<body oncontextmenu="event.preventDefault()"></body>
<script>
  document.documentElement.addEventListener('tap', () => {
    console.log('Tapped!');
  });
</script>

这个时候，如果我们去浏览器上点击一下，就会触发我们的 tap 事件，并且输出我们的 'Tapped' 消息了！

这样我们的派发事件就大功告成了。

实现一个 flick 事件

这里我们一起来完成最后一个最特别的 flick 事件。Flick 事件在我们所有的事件体系里是比较特殊的，因为它是一个需要判断数独的一个事件。

根据我们前面讲到的，在 pan start 之后，如果我们在手指离开屏幕之前，我们执行了一个快速滑动手指的动作，到达一定的速度以上就会触发我们的 flick 事件，而不是原本的 pan end 的事件。

那么需要如何判断这个速度的？其实可以在我们的 move 函数中，获得当前这一次移动时的速度。但是这个并不能帮助我们去处理，因为如果只按照两个点之间移动时的速度，根据浏览器实现的不同，它会有一个较大的误差。

所以更加准确的方式就是，取数个点，然后用它们之间的平均值作为判定的值。那么要实现这个功能，我们就需要存储一段时间之内的这些点，然后使用这些点来计算出速度的平均值。

有了实现的思路了，我们就来整理下，在代码中怎么去编写这一块的逻辑。

首先我们需要在触发 start 的时候，就把第一个记录点加入到我们的全局 context 之中。而这里需要记录几个值：

t：代表当前点触发/加入时的时间，这里我们使用 Date.now()
x：代表当前点 x 轴的坐标
y：代表当前点 y 轴的坐标

这些值到了后面都会用来计算移动速度的。

let start = (point, context) => {
  (context.startX = point.clientX), (context.startY = point.clientY);

  context.points = [
    {
      t: Date.now(),
      x: point.clientX,
      y: point.clientY,
    },
  ];

  context.isPan = false;
  context.isTap = true;
  context.isPress = false;

  context.handler = setTimeout(() => {
    context.isPan = false;
    context.isTap = false;
    context.isPress = true;
    console.log('press-start');
    context.handler = null;
  }, 500);
};

然后每一次触发 move 的时候，都给当前的 content 放入一个新的点。但是在加入新的点之前，需要过滤一次已经存储的点。我们只需要最近 500 毫秒内的点来计算速度即可，其余的点就可以过滤掉了。

在执行 flick 动作的时候，我们是不会滑动一个很长的距离和时间的，加上我们是需要捕捉一个快速的滑动动作，这个动作肯定是在 500 毫秒以内的动作，要不也不叫 “快” 了。所以这里就只需要 500 毫秒内的点即可。

let move = (point, context) => {
  let dx = point.clientX - context.startX,
    dy = point.clientY - context.startY;

  if (!context.isPan && dx ** 2 + dy ** 2 > 100) {
    context.isPan = true;
    context.isTap = false;
    context.isPress = false;
    console.log('pan-start');
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    console.log(dx, dy);
    console.log('pan');
  }

  context.points = context.points.filter(point => Date.now() - point.t < 500);

  context.points.push({
    t: Date.now(),
    x: point.clientX,
    y: point.clientY,
  });
};

在 end 事件触发的时候，就可以来计算这次滑动的速度了。因为这里是计算用户滑动时的速度，如果用户是其他类型的手势动作，是不需要去计算速度的。所以这段计算逻辑就可以写在 isPan 成立的判断里面即可。

首先给这个手势动作一个状态变量 isFlick，并且给予它一个默认值为 false。

在计算速度之前，一样需要过滤一次我们 context 中储存的全部的点，把 500 毫秒之外的点过滤掉。

在数学或者物理中，有一个计算速度的公式： 速度 = 距离 / 用时。那么这里要去计算速度的话，首先需要计算的就是距离。而这里要计算的是直径距离，所以需要 x 轴和 y 轴的距离的二次幂相加，然后开根号获得的值就是我们要的直径距离。

那么 x 轴距离为例，就是当前点的 x 轴坐标，减去记录中第一个点的 x 轴左边。y 轴的距离就同理可得了。那么有了距离，我们就可以直接从当前点和第一个点的时间差获得 用时。最后就可以运算出速度。

let end = (point, context) => {
  context.isFlick = false;

  if (context.isTap) {
    //console.log('tap');
    // 把原先的 console.log 换成 dispatch 调用
    // 这个事件不需要任何特殊属性，直接传`空对象`即可
    dispatch('tap', {});
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    context.points = context.points.filter(point => Date.now() - point.t < 500);

    let d = Math.sqrt((point.x - context.points[0].x) ** 2 + (point.y - context.points[0].y) ** 2);
    let v = d / (Date.now() - context.points[0].t);
  }

  if (context.isPress) {
    console.log('press-end');
  }
};

好样的，这样我们就有两个点之间的 v 速度。那么现在呢，我们需要知道多快的速度才能认为是一个 flick 动作呢？这里就用上帝视角直接得出 1.5 像素每毫秒的速度就是最合适的（这个怎么算出来的？其实我们可以直接 console.log(v)，把速度打印出啦，然后我们手动去测试，就会发现大概 v = 1.5 的时候差不多就是对的了）。

所以我们这里直接就可以判断，如果 v > 1.5 的话，我们就认为用户的手势就是一个 flick，否则就是普通的 pan-end。

let end = (point, context) => {
  context.isFlick = false;

  if (context.isTap) {
    //console.log('tap');
    // 把原先的 console.log 换成 dispatch 调用
    // 这个事件不需要任何特殊属性，直接传`空对象`即可
    dispatch('tap', {});
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    context.points = context.points.filter(point => Date.now() - point.t < 500);

    let d = Math.sqrt((point.x - context.points[0].x) ** 2 + (point.y - context.points[0].y) ** 2);
    let v = d / (Date.now() - context.points[0].t);

    if (v > 1.5) {
      context.isFlick = true;
      dispatch('flick', {});
    } else {
      context.isFlick = false;
      dispatch('panend', {});
    }
  }

  if (context.isPress) {
    console.log('press-end');
  }
};

这样 flick 事件的处理就完成了，其实这段代码中还有一些 console.log() 是没有被改为使用 dispatch 给派发出去的。但是接下来就要开始看看怎么重新封装这个手势库了，所以这里我们就不一一更改过来先了。

如果想把这里的代码写完整的同学，可以自行把所有的 console.log(事件名) 部分的代码都改正过来哦～

最后附上到此完整的代码。

let element = document.documentElement;

let contexts = new Map();

let isListeningMouse = false;

element.addEventListener('mousedown', event => {
  let context = Object.create(null);
  contexts.set(`mouse${1 << event.button}`, context);

  start(event, context);

  let mousemove = event => {
    let button = 1;

    while (button <= event.buttons) {
      if (button & event.buttons) {
        let key;
        // Order of buttons & button is not the same
        if (button === 2) {
          key = 4;
        } else if (button === 4) {
          key = 2;
        } else {
          key = button;
        }

        let context = contexts.get('mouse' + key);
        move(event, context);
      }
      button = button << 1;
    }
  };

  let mouseup = event => {
    let context = contexts.get(`mouse${1 << event.button}`);
    end(event, context);
    contexts.delete(`mouse${1 << event.button}`);

    if (event.buttons === 0) {
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);
      isListeningMouse = false;
    }
  };

  if (!isListeningMouse) {
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    isListeningMouse = true;
  }
});

element.addEventListener('touchstart', event => {
  for (let touch of event.changedTouches) {
    let context = Object.create(null);
    contexts.set(event.identifier, context);
    start(touch, context);
  }
});

element.addEventListener('touchmove', event => {
  for (let touch of event.changedTouches) {
    let context = contexts.get(touch.identifier);
    move(touch, context);
  }
});

element.addEventListener('touchend', event => {
  for (let touch of event.changedTouches) {
    let context = contexts.get(touch.identifier);
    end(touch, context);
    contexts.delete(touch.identifier);
  }
});

element.addEventListener('cancel', event => {
  for (let touch of event.changedTouches) {
    let context = contexts.get(touch.identifier);
    cancel(touch, context);
    contexts.delete(touch.identifier);
  }
});

let start = (point, context) => {
  (context.startX = point.clientX), (context.startY = point.clientY);

  context.points = [
    {
      t: Date.now(),
      x: point.clientX,
      y: point.clientY,
    },
  ];

  context.isPan = false;
  context.isTap = true;
  context.isPress = false;

  context.handler = setTimeout(() => {
    context.isPan = false;
    context.isTap = false;
    context.isPress = true;
    console.log('press-start');
    context.handler = null;
  }, 500);
};

let move = (point, context) => {
  let dx = point.clientX - context.startX,
    dy = point.clientY - context.startY;

  if (!context.isPan && dx ** 2 + dy ** 2 > 100) {
    context.isPan = true;
    context.isTap = false;
    context.isPress = false;
    console.log('pan-start');
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    console.log(dx, dy);
    console.log('pan');
  }

  context.points = context.points.filter(point => Date.now() - point.t < 500);

  context.points.push({
    t: Date.now(),
    x: point.clientX,
    y: point.clientY,
  });
};

let end = (point, context) => {
  context.isFlick = false;

  if (context.isTap) {
    //console.log('tap');
    // 把原先的 console.log 换成 dispatch 调用
    // 这个事件不需要任何特殊属性，直接传`空对象`即可
    dispatch('tap', {});
    clearTimeout(context.handler);
  }

  if (context.isPan) {
    context.points = context.points.filter(point => Date.now() - point.t < 500);

    let d, v;
    if (!context.points.length) {
      v = 0;
    } else {
      d = Math.sqrt(
        (point.clientX - context.points[0].x) ** 2 + (point.clientY - context.points[0].y) ** 2
      );
      v = d / (Date.now() - context.points[0].t);
    }

    if (v > 1.5) {
      context.isFlick = true;
      dispatch('flick', {});
    } else {
      context.isFlick = false;
      dispatch('panend', {});
    }
  }

  if (context.isPress) {
    console.log('press-end');
  }
};

let cancel = (point, context) => {
  clearTimeout(context.handler);
  console.log('cancel');
};

function dispatch(type, properties) {
  let event = new Event(type);
  for (let name in properties) {
    event[name] = properties[name];
  }
  element.dispatchEvent(event);
}

下一期，我们就来做手势库的最后一步，封装！～

我是来自《技术银河》的三钻，一位正在重塑知识的技术人。下期再见。

⭐️ 三哥推荐

开源项目推荐

Hexo Theme Aurora

在最近在版本 1.5.0 更新了以下功能：

》预览《

✨ 新增

自适应 “推荐文章” 布局 (增加了一个新的 “置顶文章布局” !!)
- 能够在“推荐文章”和“置顶文章”模式之间自由切换
- 如果总文章少于 3 篇，将自动切换到“置顶文章”模式
- 在文章卡上添加了“置顶”和“推荐”标签
- 📖 文档
增加了与 VuePress 一样的自定义容器 #77
- Info 容器
- Warning 容器
- Danger 容器
- Detail 容器
- 预览
支持了更多的 SEO meta 数据 #76
- 添加了 description
- 添加了 keywords
- 添加了 author
- 📖 文档

最近博主在全面投入开发一个可以 “迈向未来的” Hexo 主题，以极光为主题的博客主题。

如果你是一个开发者，做一个个人博客也是你简历上的一个亮光点。而如果你有一个超级炫酷的博客，那就更加是亮上加亮了，简直就闪闪发光。

如果喜欢这个主题，可以在 Github 上给我点个 🌟 让彼此都发光吧～

主题 Github 地址：https://github.com/auroral-ui/hexo-theme-aurora
主题使用文档：https://aurora.tridiamond.tech/zh/

VSCode Aurora Future

对，博主还做了一个 Aurora 的 VSCode 主题。用了Hexo Theme Aurora 相对应的颜色色系。这个主题的重点特性的就只用了 3 个颜色，减少在写代码的时候被多色多彩的颜色所转移了你的注意力，让你更集中在写代码之中。

喜欢的大家可以支持一下哦！直接在 VSCode 的插件搜索中输入 “Aurora Future” 即可找到这个主题哦！～

主题 Github 地址：https://github.com/auroral-ui/aurora-future-vscode-theme
主题插件地址：https://marketplace.visualstudio.com/items?itemName=auroral-ui.aurora-future

Firefox Aurora Future

我不知道大家，但是最近我在用火狐浏览器来做开发了。个人觉得火狐还真的是不错的。推荐大家尝试一下。

当然我这里想给大家介绍的是我在火狐也做了一个 Aurora 主题。对的！用的是同一套的颜色体系。喜欢的小伙伴可以试一下哦！

主题地址：https://addons.mozilla.org/en-US/firefox/addon/aurora-future/

文章来源：https://blog.csdn.net/TriDiamond6/article/details/117129384

后台-系统设置-扩展变量-手机广告位-内容正文底部

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：https://www.jcdi.cn/qianduankaifa/30842.html

上一篇 : 巧用Vscode编辑器，快速格式化代码，让你的代码变得整洁又美观

下一篇 : 接口测试怎么进行,如何做好接口测试

留言与评论（共有 0 条评论）

后台-系统设置-扩展变量-手机广告位-评论底部广告位

编程语言

php

java

python

JSP编程

CSS/HTML

前端开发

心得技巧

导航标题

css

网页制作

dreamveaver

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

导航标题

网页制作用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

前端《组件化系列》目录

事件派发

实现一个 flick 事件

⭐️ 三哥推荐

开源项目推荐

Hexo Theme Aurora

VSCode Aurora Future

Firefox Aurora Future

版权声明

热门文章

最近发表

标签列表

统计代码 | 京ICP1234567-2号

Powered By 教程弟教程弟

网页制作 用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

前端《组件化系列》目录

事件派发

实现一个 flick 事件

⭐️ 三哥推荐

开源项目推荐

Hexo Theme Aurora

VSCode Aurora Future

Firefox Aurora Future

版权声明

相关文章

热门文章

最近发表

标签列表

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

网页制作用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

Powered By 教程弟教程弟