论坛首页 Web前端技术论坛

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

浏览 2498 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-09-05   最后修改:2011-09-06

以前做过一些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) {
      if (!simMouseEvt("mousedown", e.target, e.changedTouches[0])) {
        e.preventDefault();
        setTimeout(function() {
          if (!e.target.getAttribute("movement")) {
            e.target.removeAttribute("movement");
            simMouseEvt("click", e.target, e.changedTouches[0])
          }
        }, 100);
      }
    });
    document.addEventListener("touchmove", function(e) {
      e.target.setAttribute("movement", "move");
      simMouseEvt("mousemove", e.target, e.changedTouches[0]) || e.preventDefault();
    });
    document.addEventListener("touchend", function(e) {
      e.target.removeAttribute("movement");
      simMouseEvt("mouseup", e.target, e.changedTouches[0]) || e.preventDefault();
    });
}

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

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics