Question

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

/*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()进行绑定。

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

TouchEvent界面封装了当前处于活动状态的所有接触点。 Touch界面（代表单个触摸点）包括诸如触摸点相对于浏览器视口的位置之类的信息。

我将做更多测试，并在需要时稍后更新答案。

更新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详细信息。

希望有帮助。

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

1 个答案: