如何使用vanilla javascript：选择器、事件和$的需要（此）

我有三张被

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'）

应该可以工作。不。我想我在函数上有个“这个”问题

---

-将事件（正如苹果建议的那样）内联放置

看起来像是一个解决方案……我猜，由于“this”再次出现……

您希望使用

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;
  // ...
}

---

苹果建议使用内联事件？什么。这个地狱。这看起来不像是一个建议，而是一个简单的例子，内联事件是最方便的方式……我饿了，所以请原谅心情不好，但在线词典似乎同意“建议”的意思是“提供考虑或行动”。是的，苹果建议我考虑内联事件。建议意味着“提供考虑”，但提供考虑并不意味着建议。谢谢你，简。你能提供一个for循环和queryselectoral的例子吗？我现在正在尝试第二种方法，但它不起作用，因为我不完全理解它，需要更多的时间。在接受这个答案之前，让我们看看其他善良的灵魂是否能提供更好的解释。

<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);
};