如何让移动端的touch事件触发时,变成执行PC端mouse事件?

用JavaScript写了很多mousedown、mousemove、mouseup的事件方法,在PC端上可以通过鼠标来实现(例如:缩放、拖动),但是在移动端用手指操作没反应,有什么方法可以使在移动端触发touchstart时变成执行PC端的mousedown, 触发touchmove时变成执行PC端的mousemove, 触发touchend时变成执行PC端的mouseup?

或者有这方面的框架吗?


慕婉清6462132
浏览 2071回答 1
1回答

隔江千里

// 1、定义这两个函数function touchEventToMouseEvent(event, eventType) {        if (!event.originalEvent || !event.originalEvent.targetTouches || event.originalEvent.targetTouches.length != 1)            return false;        var te = event.originalEvent.targetTouches[0];        var clientX = te.clientX, clientY = te.clientY, screenX = te.screenX, screenY = te.screenY;        var simEvent = new MouseEvent(eventType, {            clientX: clientX,            clientY: clientY,            screenX: screenX,            screenY: screenY,            button: 0,            buttons: 0        });        return simEvent;    }    function findElm(targetElement) {        targetElement.on('touchstart', function (e) {            console.log('touchstart');            console.log(e);            var simEvent = touchEventToMouseEvent(e, 'mousedown');            if (simEvent != null) {                $(this)[0].dispatchEvent(simEvent);            }        });        targetElement.on('touchmove', function (e) {            e.preventDefault();            console.log('touchmove');            var simEvent = touchEventToMouseEvent(e, 'mousemove');            if (simEvent != null) {                $(this)[0].dispatchEvent(simEvent);            }        });        targetElement.on('touchend', function (e) {            console.log('touchend');            console.log(e);            var simEvent = touchEventToMouseEvent(e, 'mouseup');            if (simEvent != null) {                $(this)[0].dispatchEvent(simEvent);            }        });}   // 2、执行 findElm(selectorElement) 即可将移动端的touchfindElm(selectorElement);     
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript