JS模拟Touch事件

        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

posted @ 2019-08-24 13:54  JeromeBlog  阅读(3346)  评论(0编辑  收藏  举报