编辑:我添加了两个console.logs,一个在touchmove函数之前,另一个在touchmove函数中,并且它们都给出了相同的touch.pageX值,所以touch.pageX没有改变一点都不我不知道为什么不是。
我正在尝试使用touchstart
和touchmove
个事件在页面上向左或向右移动图像。
这是触摸图像时触发的功能。 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
。