如何让移动端的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); 
    

Answer 2

简单的移动端触屏事件，zepto.js，
复杂的话，看看这个知乎

Answer 3

封装一个通用的事件触发以后运算逻辑的函数，无论PC还是移动端事件都统一调用这个函数，当然这个函数可能需要做一些兼容

Answer 4

具体你可以了解一下FastClick实现原理，具体实现原理就是：

1. 将所有touch与mouse事件绑定到document.body上
2. 当某个div触发touch事件，将会冒泡到document.body上
3. 针对不同类型的touch事件，触发document不同的mouse事件
4. 然后接下来就是document.body的事件委托了

Answer 5

if (IsPC()) {
    var self = this
    var isMouseDown = false
    this.element.addEventListener("mousedown", function (evt) {
      isMouseDown = true
      evt.touches = [{ pageX: evt.pageX, pageY: evt.pageY }]
      self.start(evt)
    }, false);
    this.element.addEventListener("mousemove", function (evt) {
      evt.preventDefault()
      if (isMouseDown === true) {
        evt.touches = [{ pageX: evt.pageX, pageY: evt.pageY }]
        self.move(evt)
      }
    }, false);
    this.element.addEventListener("mouseup", function (evt) {
      isMouseDown = false
      evt.touches = [{ pageX: evt.pageX, pageY: evt.pageY }]
      evt.changedTouches = [{ pageX: evt.pageX, pageY: evt.pageY }]
      self.end(evt)
    }, false);
    this.element.addEventListener("mouseout", function (evt) {
      evt.touches = [{ pageX: evt.pageX, pageY: evt.pageY }]
      self.cancel(evt)
    }, false);
  } else {
    this.element.addEventListener('touchstart', this.start, false)
    this.element.addEventListener('touchmove', this.move, false)
    this.element.addEventListener('touchend', this.end, false)
    this.element.addEventListener('touchcancel', this.cancel, false)
  }

四个类型的PC移动端转换（移动端优先），可以封装包装函数转换。难点只是 mousemove 和 touchmove 的区别。