我如何在香草javascript中:选择器，事件和$(this）的需要

How do I in vanilla javascript: selectors,events and the need of $(this)

本文关键字：this 事件 香草 javascript 选择器      更新时间：2023-09-26

我有三张span.main{overflow:hidden}裁剪的照片。用户可以通过触摸事件平移跨度，并探索图片的隐藏部分。

到目前为止的代码：

document.addEventListener('DOMContentLoaded', function() {
var box = document.querySelector('.main'); 
        box.addEventListener("touchstart", onStart, false);
        box.addEventListener("touchmove", onMove, false);
        box.addEventListener("touchend", onEnd, false);
});
var startOffsetX, startOffsetY;
var moving = false;
function getPos(ev) {
return { 
    x: ev.touches ? ev.touches[0].clientX : ev.clientX, 
    y: ev.touches ? ev.touches[0].clientY : ev.clientY
};
}
function onStart(ev) {
moving = true;
var box = document.querySelector('.main');// I need something like $(this)
var pos = getPos(ev);
startOffsetX = pos.x + box.scrollLeft;
startOffsetY = pos.y + box.scrollTop;
if (ev.preventDefault)
    ev.preventDefault();
else
    ev.returnValue = false;
}
function onMove(ev) {
if (moving) {
    var pos = getPos(ev);
    var x = startOffsetX - pos.x;
    var y = startOffsetY - pos.y;
    var box = document.querySelector('.main'); //  I need something like $(this) 
    box.scrollLeft = x;
    box.scrollTop = y;
    if (ev.preventDefault)
        ev.preventDefault();
    else
        ev.returnValue = false;
}
} 
function onEnd(ev) {
if (moving) {
    moving = false;
}
}

问题是，只有第一个缩略图能按预期工作。我试过：

-querySelector只返回第一个元素，所以如果我添加ID，querySelector('#box1,#box2,#box3')应该可以工作。Nein。我想我在函数上有个"这个"问题。。。

-将活动（正如苹果公司所建议的）内联<div class="box" onStart="ontouchstartCallback( ev);" ontouchend="onEnd( ev );"ontouchmove="onMove( ev );" > <img></div>看起来像是一个解决方案。。。我猜，又是因为"这个"。。。

您需要使用querySelectorAll方法。它返回子树中所有匹配的元素，而不是只返回第一个元素（querySelector就是这样做的）。然后使用for循环遍历它们。

var elements = document.querySelectorAll('.main');
for (var i = 0, ii = elements.length; i < ii; ++i) {
  var element = elements[i];
  element.ontouchstart = onStart;
  // ...
}

您可以采取的另一种方法（可能是更好的方法）是使用事件委派，在父元素上设置事件侦听器，并通过检查每个事件的target属性来决定要处理哪些图片。

<div id="pictures">
  <span class="main"><img /></span>
  <span class="main"><img /></span>
  <span class="main"><img /></span>
</div>
var parent = document.getElementById('pictures');
parent.ontouchstart = function (e) {
  var box = e.target.parentNode; // parentNode because e.target is an Image
  if (box.className !== 'main') return;
  onStart(e, box);
};
相关文章：