将前端触摸事件完全映射到点击事件（移动端兼容）

太过爱你忘了你带给我的痛 2022-09-11 14:22 212阅读 0赞

在开发移动端项目经常会遇到电脑调试效果没问题，切换到移动端设备出现异常，比如在GIS或者轮播图（含有拖拽行为）等组件时，电脑开发可以正常执行拖拽事件，但到了移动设备会出现事件不被触发的情况，这里可以使用"[elm-pep.js][]"这个库来实现全局事件映射，这里把贴出相关代码，供自己学习记录：

<script>	
      		// 兼容ios触摸
            var primaryTouchId = null;
            // 当前触摸事件target
            var mouseCaptureTarget = null;
            if (!("PointerEvent" in window)) { 
                // 初始化
                definePointerCapture();
                // 只对没有触摸事件的设备执行polyfill
                if (!("TouchEvent" in window)) { 
                    addMouseToPointerListener(document, "mousedown", "pointerdown");
                    addMouseToPointerListener(document, "mousemove", "pointermove");
                    addMouseToPointerListener(document, "mouseup", "pointerup");
                }
                // 事件注册
                addTouchToPointerListener(document, "touchstart", "pointerdown");
                addTouchToPointerListener(document, "touchmove", "pointermove");
                addTouchToPointerListener(document, "touchend", "pointerup");
            }
            // 注册事件到组件原型上
            function definePointerCapture() { 
                Element.prototype.setPointerCapture = Element.prototype.setCapture;
                Element.prototype.releasePointerCapture =
                    Element.prototype.releaseCapture;
            }
            // 添加监听器
            function addMouseToPointerListener(target, mouseType, pointerType) { 
                target.addEventListener(mouseType, function (mouseEvent) { 
                    var pointerEvent = new MouseEvent(pointerType, mouseEvent);
                    pointerEvent.pointerId = 1;
                    pointerEvent.isPrimary = true;
                    pointerEvent.pointerType = "mouse";
                    pointerEvent.width = 1;
                    pointerEvent.height = 1;
                    pointerEvent.tiltX = 0;
                    pointerEvent.tiltY = 0;
                    // 点击按钮按住的时候pressure值为0.5,用作事件识别
                    "buttons" in mouseEvent && mouseEvent.buttons !== 0
                        ? (pointerEvent.pressure = 0.5)
                        : (pointerEvent.pressure = 0);
                    // if already capturing mouse event, transfer target
                    // and don't forget implicit release on mouseup.
                    // 若已捕获鼠标事件，则获取到事件对象，当松开鼠标事件释放对象
                    var target = mouseEvent.target;
                    if (mouseCaptureTarget !== null) { 
                        target = mouseCaptureTarget;
                        if (mouseType === "mouseup") { 
                            mouseCaptureTarget = null;
                        }
                    }
                    target.dispatchEvent(pointerEvent);
                    if (pointerEvent.defaultPrevented) { 
                        mouseEvent.preventDefault();
                    }
                });
            }
            // 核心代码：事件映射
            function addTouchToPointerListener(target, touchType, pointerType) { 
                target.addEventListener(touchType, function (touchEvent) { 
                    var changedTouches = touchEvent.changedTouches;
                    var nbTouches = changedTouches.length;
                    for (var t = 0; t < nbTouches; t++) { 
                        var pointerEvent = new CustomEvent(pointerType, { 
                            bubbles: true,
                            cancelable: true,
                        });
                        pointerEvent.ctrlKey = touchEvent.ctrlKey;
                        pointerEvent.shiftKey = touchEvent.shiftKey;
                        pointerEvent.altKey = touchEvent.altKey;
                        pointerEvent.metaKey = touchEvent.metaKey;
                        var touch = changedTouches.item(t);
                        pointerEvent.clientX = touch.clientX;
                        pointerEvent.clientY = touch.clientY;
                        pointerEvent.screenX = touch.screenX;
                        pointerEvent.screenY = touch.screenY;
                        pointerEvent.pageX = touch.pageX;
                        pointerEvent.pageY = touch.pageY;
                        var rect = touch.target.getBoundingClientRect();
                        pointerEvent.offsetX = touch.clientX - rect.left;
                        pointerEvent.offsetY = touch.clientY - rect.top;
                        pointerEvent.pointerId = 1 + touch.identifier;
                        // 设置默认鼠标事件值
                        pointerEvent.button = 0;
                        pointerEvent.buttons = 1;
                        pointerEvent.movementX = 0;
                        pointerEvent.movementY = 0;
                        pointerEvent.region = null;
                        pointerEvent.relatedTarget = null;
                        pointerEvent.x = pointerEvent.clientX;
                        pointerEvent.y = pointerEvent.clientY;
                        // 鼠标事件
                        pointerEvent.pointerType = "touch";
                        pointerEvent.width = 1;
                        pointerEvent.height = 1;
                        pointerEvent.tiltX = 0;
                        pointerEvent.tiltY = 0;
                        pointerEvent.pressure = 1;
                        // 第一个触摸点设置为目标事件
                        if (touchType === "touchstart" && primaryTouchId === null) { 
                            primaryTouchId = touch.identifier;
                        }
                        pointerEvent.isPrimary =
                            touch.identifier === primaryTouchId;
                        // 抬起触摸点，释放触摸事件对象
                        if (touchType === "touchend" && pointerEvent.isPrimary) { 
                            primaryTouchId = null;
                        }
                        touchEvent.target.dispatchEvent(pointerEvent);
                        if (pointerEvent.defaultPrevented) { 
                            touchEvent.preventDefault();
                        }
                    }
                });
            }
        </script>

[elm-pep.js]: https://www.npmjs.com/package/elm-pep

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

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

相关阅读

相关移动端web-点击事件active样式

移动端的点击事件不能用click直接来进行，因为click有延迟，所以用touchstart和touchend来实现需要有三个判断： ① 判断是否是双指操作； ②

Dear 丶/ 2022年12月23日 03:23/ 0 赞/ 221 阅读

相关手机移动端-touch 手指触摸移动事件

touch：事件可以分为三个 touchstart，touchmove，touchend <!DOCTYPE html> <html lang="en">

缺乏、安全感/ 2022年12月22日 13:24/ 0 赞/ 231 阅读

相关移动端的点击事件

[https://blog.csdn.net/qq\_41614928/article/details/92058822][https_blog.csdn.net_qq_416

港控/mmm°/ 2022年11月12日 01:44/ 0 赞/ 210 阅读

相关将前端触摸事件完全映射到点击事件（移动端兼容）

在开发移动端项目经常会遇到电脑调试效果没问题，切换到移动端设备出现异常，比如在GIS或者轮播图（含有拖拽行为）等组件时，电脑开发可以正常执行拖拽事件，但到了移动设备会出现事件不

太过爱你忘了你带给我的痛/ 2022年09月11日 14:22/ 0 赞/ 213 阅读

相关 JS移动设备触摸事件API

JS移动设备触摸事件API <table style="border-spacing:0px; background-color:transparent; font-s

向右看齐/ 2022年08月27日 05:47/ 0 赞/ 201 阅读

相关移动端前端JS事件相关

接触移动端的前端童鞋，估计在js事件这里踩了很多坑，传统的click事件延迟和点透现象令人很烦扰，到底该不该摒弃click事件，全部换成touch事件呢？如果是，遇到点透现象又

素颜马尾好姑娘i/ 2022年08月07日 03:52/ 0 赞/ 196 阅读

相关移动端keyup事件

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

不念不忘少年蓝@/ 2022年07月15日 11:43/ 0 赞/ 323 阅读

相关 angularJS 实现移动端触摸事件Touchstart Touchmove

angular 移动端开发，启用ngTouchstart,ngTouchmove,ngTouchend 1. app.js引用 .directive("ngTou

缺乏、安全感/ 2022年06月08日 14:39/ 0 赞/ 407 阅读

相关移动端事件及事件应用

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.移动端事件基

末蓝、/ 2022年06月04日 00:57/ 0 赞/ 305 阅读

相关移动端 - touch事件

touch 事件在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式 `touchstart` 手指触碰

矫情吗；*/ 2022年05月19日 07:21/ 0 赞/ 286 阅读