从鼠标到手指-传统拖拽在ipad中

最新推荐文章于 2022-03-11 16:01:21 发布

messchapters

最新推荐文章于 2022-03-11 16:01:21 发布

阅读量226

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/messchapters/article/details/84012898

版权

以前做过一些UI组件，支持一些拖拖拽拽的。最近搞到个ipad，老的组件到了这些手持设备上自然是拖不走，拽不动了。后来想到一个方法，用touch的事件模拟鼠标的操作，也就是用touch的响应事件触发鼠标事件。话不多说，上代码，请大家拍砖

function isTouchDevice() {
  return 'ontouchstart' in window;
}

function fitTouchDevice() {
  if (!isTouchDevice()) {
    return;
  }
  function simMouseEvt(type, target, pos) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(type, true, true, document, 
        0, pos.screenX, pos.screenY, pos.clientX, pos.clientY, 
        false, false, false, false, 
        0, target);
    return target.dispatchEvent(evt);
  }
  
  document.addEventListener("touchstart", function(e) {
    simMouseEvt("mousedown", e.target, e.changedTouches[0]) || e.preventDefault();
  });
  document.addEventListener("touchmove", function(e) {
    simMouseEvt("mousemove", e.target, e.changedTouches[0]) || e.preventDefault();
  });
  document.addEventListener("touchend", function(e) {
    simMouseEvt("mouseup", e.target, e.changedTouches[0]) || e.preventDefault();
    simMouseEvt("click", e.target, e.changedTouches[0]);
  });
}

目前只在ipad和android手机上测试过，想法是行得通的。