Javascript触摸事件以向左或向右移动图像不起作用

时间:2018-04-21 21:02:01

标签: javascript touch touch-event

编辑:我添加了两个console.logs,一个在touchmove函数之前,另一个在touchmove函数中,并且它们都给出了相同的touch.pageX值,所以touch.pageX没有改变一点都不我不知道为什么不是。

我正在尝试使用touchstarttouchmove个事件在页面上向左或向右移动图像。

这是触摸图像时触发的功能。 console.log语句正在触发,因此它们正在执行,但图像没有移动。移动触摸点时,console.log事件侦听器函数中的touchmove会持续触发,我猜这是期望的行为。

// event listener on an image that gets touched
lightboxImages[i].addEventListener('touchstart', touchMove);

  function touchMove(event) {

    console.log('touch.pageX');

    event.preventDefault();
    var touchedImage = event.target;
    var touch = event.touches[0];
    var moveOffsetX = touchedImage.offsetLeft - touch.pageX;

    touchedImage.addEventListener('touchmove', function() {

      console.log('touch.pageX');
      var positionX = touch.pageX + moveOffsetX;
      touchedImage.style.left = positionX + 'px';
    }, false);
  }

在dom中,这似乎会更改触摸到left的图像的left: 0值,但不会导致图像在页面上的任何物理移动,因为图像有100%宽度并占据页面的整个宽度。

因为图片已经是页面的100%宽度,所以我试图让这个动作基本上将页面移出屏幕。我不确定是什么阻止left值不是0

部分代码来自:https://www.youtube.com/watch?v=_3b1rvuFCJY

0 个答案:

没有答案