touchmove和mousemove使用相同的功能,如何清理我的代码?

时间:2014-12-02 16:28:34

标签: javascript jquery

function crosshair(circle_cursor) {
  circle_cursor.on({
    'touchstart touchmove': function(e) {
      e.preventDefault();
      var orig = e.originalEvent;
      var x4 = orig.changedTouches[0].pageX;
      var y4 = orig.changedTouches[0].pageY;

      cH.css('top', y4);
      cV.css('left', x4);
      coordinates( x4, y4 );

      alertMsg.css({
        display: 'block',
        top: y4 - map.offset().top + 30,
        left: x4 - map.offset().left - 80
      });
    },

    'mousemove': function(e){
      var clientX = e.pageX,
          clientY = e.pageY,
          target_position = point.offset(),
          x1 = target_position.left,
          y1 = target_position.top,
          d = distance(clientX, clientY, x1, y1);

      goPoint.hide();
      hair.show();

      cH.css('top', clientY + 25);
      cV.css('left', clientX + 24);

      //Display coordinates
      coordinates(clientX, clientY);

      //Display message box
      alertMsg.css({
        display: 'block',
        top: clientY - map.offset().top + 60,
        left: clientX - map.offset().left - 90
      });
    }
   });

这是我的代码的一部分,基本上我使用相同的功能touchstart和mousemove。但是,用于检测坐标的方法是不同的。

我如何结合这些?

谢谢!

1 个答案:

答案 0 :(得分:0)

您应该分别检测方向(event.changedTouches [0] .pageX,event.pageX)和移动页面内的对象。

E.g。制作处理移动的通用函数:

function move(x, y) {}

并保留事件处理程序,但没有页面交互逻辑。仅检测输入位置并将其提供给move(x, y)函数。