どのように私はバニラのjavascriptで：セレクタ、イベント、$（this）の必要性

Question

私はspan.main{overflow:hidden}でトリミングされた3枚の写真があります。ユーザーはタッチイベントでスパンをパンし、画像の隠れた部分を探索できます。これまで

コード：

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。私は機能に「この」問題があります...

- プレースイベント（Appleが示唆しているように）インライン<div class="box" onStart="ontouchstartCallback(ev);" ontouchend="onEnd(ev);"ontouchmove="onMove(ev);" > <img></div>はまだ解決策のように見えました...私の推測では、もう一度「これ」のために...

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

あなたが取ることができます（そしてそれはおそらく1優れている）他のアプローチは、イベントの委任を使用し、親要素のイベントリスナーを設定し、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); 
};