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

Question

用JavaScript写了很多mousedown、mousemove、mouseup的事件方法，在PC端上可以通过鼠标来实现（例如：缩放、拖动），但是在移动端用手指操作没反应，有什么方法可以使在移动端触发touchstart时变成执行PC端的mousedown， 触发touchmove时变成执行PC端的mousemove， 触发touchend时变成执行PC端的mouseup？或者有这方面的框架吗？

Answer 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) 即可将移动端的touch

findElm(selectorElement);