如何在 JavaScript 中检测滑动? [复制]

2024-02-18

我想用js制作简单的游戏。但为此,我希望用户通过在屏幕上向上/向下/向右/向左滑动手指/光标来进行游戏。有一个简单的方法可以做到吗?


你可以试试这个。非常简单易懂。

  var container = document.querySelector("CLASS OR ID FOR WHERE YOU WANT TO DETECT SWIPE");

  container.addEventListener("touchstart", startTouch, false);
  container.addEventListener("touchmove", moveTouch, false);

  // Swipe Up / Down / Left / Right
  var initialX = null;
  var initialY = null;

  function startTouch(e) {
    initialX = e.touches[0].clientX;
    initialY = e.touches[0].clientY;
  };

  function moveTouch(e) {
    if (initialX === null) {
      return;
    }

    if (initialY === null) {
      return;
    }

    var currentX = e.touches[0].clientX;
    var currentY = e.touches[0].clientY;

    var diffX = initialX - currentX;
    var diffY = initialY - currentY;

    if (Math.abs(diffX) > Math.abs(diffY)) {
      // sliding horizontally
      if (diffX > 0) {
        // swiped left
        console.log("swiped left");
      } else {
        // swiped right
        console.log("swiped right");
      }  
    } else {
      // sliding vertically
      if (diffY > 0) {
        // swiped up
        console.log("swiped up");
      } else {
        // swiped down
        console.log("swiped down");
      }  
    }

    initialX = null;
    initialY = null;

    e.preventDefault();
  };

参考:https://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm https://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中检测滑动? [复制] 的相关文章

随机推荐

  • Valgrind 未显示错误使用 c_str() 的无效内存访问

    想象一下这样的代码 string f string r ab return r int main const char c f c str printf s n c return 0 这段代码可能会崩溃 对吧 因为那个字符串c指向被破坏 但
  • 将大型 NumPy 数组写入文件的有效方法

    我目前有一个在 PiCloud 上运行的项目 其中涉及 ODE 求解器的多次迭代 每次迭代都会生成一个约 30 行和 1500 列的 NumPy 数组 每次迭代都会附加到先前结果数组的底部 通常 我只是让函数返回这些相当大的数组 将它们保存
  • React Google Maps Api 在第一次渲染时不会渲染子元素

    我正在尝试在我的应用程序中使用 Google Maps Api 一切都很好 直到我想在地图的第一次渲染时显示标记 标记没有显示 但如果我在渲染完成后再添加一个标记 标记就会出现 所以问题是我想用已经存在的标记渲染地图 我不想等待选择某个位置
  • Excel 图表不应有尾随的空单元格占用轴上的空间

    想要在一系列数据上绘制图表 其长度可以根据用户输入而改变 因此 范围末尾的空单元格不应出现在图表上 并且轴根本不应具有这些值 Detail 复利计算器 用户可以进入投资期 如果图表正确显示 10 年 并且用户将期间更改为 5 年 那么图表应
  • 带有外键字段列表的 Django 表单

    我有以下模型 我正在尝试为其创建表单 class Letter models Model title models CharField max length 100 publish date models TimeField class L
  • J2Mod 基本主从问题

    我正在尝试使用 Modbus 从站和主站j2mod 它的版本是 1 0 6 所以与另一个程序兼容 对于我在网上找到的代码 我确实有一些一般性问题 我几乎没有找到任何有用的文档 所以我有点无能为力 TCP主控器 this addr InetA
  • iOS Swift:在收件箱电子邮件中打开邮件应用程序

    晚上 我试图通过按钮操作打开邮件应用程序的收件箱邮件 在网络上 我看到可以打开电子邮件编辑器对象的电子邮件应用程序 但我并不想创建新电子邮件 我只是希望用户检查电子邮件 有小费吗 我使用以下代码解决了 let mailURL URL str
  • 如何在自引用关联中强制执行外键约束?

    假设最简单的例子 var Person sequelize define Person name Sequelize STRING Person hasMany Person as Children foreignKeyConstraint
  • WPF 中 DataTemplate 中的 x:Key、x:Name 和 x:UID 有什么区别?

    我正在尝试在 WPF 中创建动态选项卡 并且正在尝试编写一个仅适用于某些选项卡项目的内容模板 我希望能够为内容模板创建一个标识符 以便我可以在后面的代码中引用它 这样我就可以有选择地将它应用于单个 TabControl 中的某些选项卡 但是
  • 如何准确合并 firebase firestore 中的多个流

    在您说这是一个重复的问题或者我应该使用嵌套流构建器之前 请听我说完 我正在设计一个社交媒体类型的应用程序 我希望用户在他们关注的人在 我的关注者帖子 集合中发布内容时收到更新 在应用程序中 应用程序将检查 firebase rtdb 中当前
  • 打印大量格式化数据时如何避免Broken Pipe错误?

    我正在尝试打印我的格式的元组列表stdout 为此 我使用字符串格式 http docs python org 2 library string html string formatting方法 一切工作正常 但是当我通过管道输出看到 第一
  • 如何使用 PhoneGap Javascript 读取 Android 中的文件

    如何使用 PhoneGap 和 Javascript 读取 Android 中的文件 我尝试了不同站点上给出的几个代码片段 但未能成功 其实我是一个初学者 对Phonegap知之甚少 我也尝试过文件阅读器 http docs phonega
  • 如何捕获控制器内变量中的default.phtml

    我有一个简单的问题 如何将 Project application layouts scripts default phtml 中的 default phtml 的内容渲染为变量 以便我可以拥有它的 html 在索引控制器中 使用一个操作和
  • 行为测试运行器在 Jenkins 上没有彩色输出

    我在 EC2 实例上的 Ubuntu 服务器 14 04 上设置了 jenkins 我有一些使用执行的硒测试behave http pythonhosted org behave 作为测试运行者 在 Jenkins 上我也安装了该插件安西色
  • 如何使用 asp.net 为 Web 应用程序创建补丁文件

    我想了解 VS 2010 中是否有可用的规定或使用某些第三方工具来为 Web 应用程序创建补丁 热修复 我不想发布副本并替换文件 dll 方法 而是使用 Web 设置来安装应用程序 以便仅更新原始应用程序中更改的文件并将其安装在虚拟目录中
  • C++ 链表行为

    我有一些 C 代码 其中有两个链接列表 比如 A 和 B A 被插入到 B 的特定位置 并且 A 仍然有元素 如何使用 C STL 有效地模拟相同的行为 如果我尝试拼接 它会使第二个空 谢谢 戈库尔 尝试插入 B insert positi
  • 实体框架获取 sql 连接

    鉴于在实体框架中显式关闭连接 https stackoverflow com questions 5285877 closing connections explicitly in entity framework and http msd
  • Date.toLocaleDateString() 不适用于 Nodejs v10.14.2

    由于我将节点服务器更新为最新稳定版本 因此日期字符串不再像以前那样显示 SERVER 使用 Nodejs v10 14 2 在 centOS 7 UNIX 上运行节点 LAPTOP 使用 Nodejs v8 5 0 在 macOS 10 1
  • Python在父类中使用派生类的方法?

    我可以强制父类调用派生类的函数版本吗 class Base object attr1 attr2 def virtual self pass doesn t do anything in the parent class def func
  • 如何在 JavaScript 中检测滑动? [复制]

    这个问题在这里已经有答案了 我想用js制作简单的游戏 但为此 我希望用户通过在屏幕上向上 向下 向右 向左滑动手指 光标来进行游戏 有一个简单的方法可以做到吗 你可以试试这个 非常简单易懂 var container document qu