当前位置: 首页 > 资讯 >

JS 33 - 在触控装置侦测手势的滑动方向!

大家好!

今天我们要实作在触控装置中侦测手势的方向。
我们进入今天的主题吧!
备注:前几天和今天的范例将会於近期补上。


程序码

(function (xPos, yPos, xGap, yGap, timeGap, el) {
    Felix(document).on('touchstart', start, false);
    Felix(document).on('touchmove', move, false);
    Felix(document).on('touchend', end, false);

    function start(e) {
        /* 元素没有 data-swipeable="true" 的属性时,停止事件监听器。 */
        if (e.target.dataset.swipeable !== 'true') return;
        el = e.target;
        timeGap = Date.now();
        xPos = e.touches[0].clientX;
        yPos = e.touches[0].clientY;
        xGap = 0;
        yGap = 0;
    }

    function move(e) {
        if (!xPos || !yPos) return;
        xGap = xPos - e.touches[0].clientX;
        yGap = yPos - e.touches[0].clientY;
    }

    function end(e) {
        /* 滑动到其他元素时,停止事件监听器。 */
        if (el !== e.target) return;
        
        let dir = '';
        const time = Date.now() - timeGap;
        /* 设定触发条件,预设为 10px。 */
        const condition = parseInt(el.dataset.swipeCondition || '10', 10);
        /* 设定持续条件,预设为 1s。 */
        const timeout = parseInt(el.dataset.swipeTimeout || '1000', 10);
        
        (function (x, y) {
            if (x > y) {
                if (x <= condition || time >= timeout) return;
                dir = xGap > 0 ? 'left' : 'right';
            } else {
                if (y <= condition || time >= timeout) return;
                dir = yGap > 0 ? 'up' : 'down';
            }
        })(Math.abs(xGap), Math.abs(yGap));
        
        xPos = null;
        yPos = null;
        timeGap = null;

        if (dir === '') return;
        const event = new CustomEvent(event, {
            detail: { direction: dir },
            bubbles: true,
            cancelable: true
        });
        el.dispatchEvent(event);
    }
})(null, null, null, null, null, null);

实测

范例连结制作中。


差不多也到尾声了。
如果对文章有任何疑问,也欢迎在下方提问和建议!
我是 Felix,我们明天再见!


相关文章:

  • 不只懂 Vue 语法:请用图片轮播的例子示范 Composition API?
  • AE袅袅升起的烟(香菸)-Day13
  • 第29天-CSS-影像-(3-3)
  • Day 25 | Flutter 路由管理套件 - auto_route
  • D11-用 Swift 和公开资讯,打造投资理财的 Apps { 台股申购实作.4 - 用 Calendar 物件处理台湾的民国年}
  • 使用 Learner Lab 建立 WordPress 网站 (EC2)
  • [Day 13] SCSS 结合 Bootstrap 网页制作
  • [iT铁人赛Day25]练习题(4)
  • [Day 16] JavaScript 网页事件处理
  • 前端工程学习日记27天 header menu 三栏式 flex
  • Day 1 - 前言
  • [Day 04] - 用Spring Boot连接Mongo DB
  • [Python 爬虫这样学,一定是大拇指拉!] DAY19 - Python:Requests 基本应用 (2)
  • 环境配置(Day2)
  • 装置在Windows上未就绪错误如何重新连接您的磁碟机
  • 日本虚拟信用卡预付卡礼品卡大全
  • Vultr / Digitalocean开通教程和购买教程,Vultr / Digitalocean如何切换IP教程方法
  • WordPress SEO怎么做?如何优化WordPress提升流量
  • 如何找国外网红营销?国外网红营销方法和推荐
  • Git是什么?
  • 韩国Moack蘑菇CN2服务器评测和特价服务器,优惠码
  • 支持支付宝的国外VPS主机服务器大全:用支付宝买国外网站空间服务器VPS
  • 香港电话卡怎么在内地使用: CSL Hello/Three/CMHK/Smartone电话卡内地使用方法
  • WordPress禁用古腾堡编辑器全屏模式
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN
  • Windows服务器推荐:便宜好用稳定靠谱的国外Windows服务器推荐
  • 国外代发货教程:教你如何一件代发做跨境电商国外市场
  • WordPress教程:教你如何置顶文章
  • WordPress 调试模式基本指南
  • Gutenberg 10.6 添加Duotone过滤器、查询模式轮播和最常用标签选择器