javascript - 图像应使用 jquery 或 javascript 跟随触摸位置

Question

我有一个图像，我希望图像移动到发生触摸输入的位置。基本上图像应该充当虚拟光标。我已经为鼠标移动做了，但相同的代码不适用于触摸移动。

<小时/>

/*works for mouse move */   
    $(document).mousemove(function(e) {
        $('img').offset({
            left: e.pageX-55,
            top: e.pageY-45
        });
    });

/* for touch move */
    $(document).touchmove(function(e) {
        $('img').offset({
            left: e.pageX-55,
            top: e.pageY-45
        });
    });

预期:图像将跟随桌面中的光标位置，并且应跟随触摸设备中的触摸位置。

Answer 1

您可能需要考虑使用 .on() 进行绑定(bind)。

function moveImg(e){
  console.log(e);
  $('img').offset({
    left: e.pageX-55,
    top: e.pageY-45
  });
}

$(document).on({
  mousemove: moveImg,
  touchmove: moveImg
});

请记住，并非所有浏览器都支持 touchmove:https://developer.mozilla.org/en-US/docs/Web/API/Document/touchmove_event

pageX 和 pageY 似乎是触摸事件的一部分，但如果触摸点超过 1 个，则可能会导致一些问题。查看更多:https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

The TouchEvent interface encapsulates all of the touch points that are currently active. The Touch interface, which represents a single touch point, includes information such as the position of the touch point relative to the browser viewport.

我将进行更多测试，并在需要时更新答案。

更新1

工作示例:https://jsfiddle.net/Twisty/hb0awzdy/

移动示例:https://jsfiddle.net/Twisty/hb0awzdy/show/

touchmove 事件正在寻找并可能捕获多个触摸点。因此，为了解决这个问题，我们要检查第一个并忽略另一个。

$(function() {
  function log(eObj) {
    var str = eObj.type + " [" + eObj.top + "," + eObj.left + "]";
    $("#results").html(str);
  }

  function moveCursor(e) {
    var p;
    var o = {
      x: 55,
      y: 45
    };
    if (e.type == "mousemove") {
      p = {
        left: Math.round(e.pageX - o.x),
        top: Math.round(e.pageY - o.y),
        type: e.type
      };
    } else if (e.type == "touchmove") {
      var touch = e.changedTouches[0];
      p = {
        left: Math.round(touch.pageX - o.x),
        top: Math.round(touch.pageY - o.y),
        type: e.type
      }
    }
    $('.cursor').css(p);
    log(p);
  }

  $(document).on({
    mousemove: moveCursor,
    touchmove: moveCursor
  });
});

如您所见，event.changedTouches 是各个触摸点及其属性的数组。如果我们关注 event.changedTouches[0]，我们可以获得您正在查找的 pageX 和 pageY 详细信息。

希望有帮助。