Как мне в vanilla javascript: селекторы, события и необходимость $ (это)

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 возвращает только первый элемент, поэтому, если я добавлю идентификаторы и querySelector('#box1,#box2,#box3') будет работать. Nein. Я думаю, что у меня есть проблема с этим в функциях ...

-Place события (как предлагает Apple) inline <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);
};