我如何在香草javascript：選擇器，事件和$（this）的需要

Question

我有3張圖片由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。 我想我在功能上有一個'this'問題...

-放置事件（如Apple所建議的）內聯<div class="box" onStart="ontouchstartCallback( ev);" ontouchend="onEnd( ev );"ontouchmove="onMove( ev );" > <img></div> <div class="box" onStart="ontouchstartCallback( ev);" ontouchend="onEnd( ev );"ontouchmove="onMove( ev );" > <img></div> <div class="box" onStart="ontouchstartCallback( ev);" ontouchend="onEnd( ev );"ontouchmove="onMove( ev );" > <img></div>看起來還是一個解決方案...我的猜測是，由於再次存在“ this”……

Answer 1

您想改用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);
};