JS模拟Touch事件

最新推荐文章于 2025-02-28 21:29:36 发布

转载最新推荐文章于 2025-02-28 21:29:36 发布 · 1.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/jeromeblog/p/11404325.html

本文介绍了如何使用JavaScript来模拟Touch事件。通过理解WebAPI中的Touch和TouchEvent对象，结合MDN文档和StackOverflow上的讨论，可以创建和处理触摸事件，这对于在浏览器环境中实现触屏设备的交互至关重要。

        var ele =  document.getElementsByClassName('target_node_class')[0]
        //may have x and y properties in some browsers,But it always has left, top, right, and bottom properties.
        var rect = ele.getBoundingClientRect(); 
        var touch = new Touch({
            "identifier" : 0,
            "target" : ele,
            "clientX" : (rect.left + rect.right)/2,
            "clientY" : (rect.top + rect.bottom)/2,
            "screenX" : (rect.left + rect.right)/2,
            "screenY" : (rect.top + rect.bottom)/2,
            "pageX" : (rect.left + rect.right)/2,
            "pageY" : (rect.top + rect.bottom)/2,
            "radiusX" : 11.5,
            "radiusY" : 11.5,
            "rotationAngle" : 0.0,
            "force" : 1});
        
        var touchstart = new TouchEvent("touchstart", {
            cancelable: true,
            bubbles: true,
            composed: true,
            touches: [touch],
            targetTouches: [touch],
            changedTouches: [touch]
        });
        
        var touchend = new TouchEvent("touchend", {
            cancelable: true,
            bubbles: true,
            composed: true,
            touches: [touch],
            targetTouches: [touch],
            changedTouches: [touch]
        });
        
        ele.dispatchEvent(touchstart);
        ele.dispatchEvent(touchend);

相关WebAPI
Touch: https://developer.mozilla.org/en-US/docs/Web/API/Touch/Touch
TouchEvent: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/TouchEvent
stackoverflow上类似的问题：https://stackoverflow.com/questions/29018151/how-do-i-programmatically-create-a-touchevent-in-chrome-41/42447620

转载于:https://www.cnblogs.com/jeromeblog/p/11404325.html

标签