Переход к новым элементам во время touchmove

Я хотел бы сделать так, чтобы, когда вы перетаскиваете палец по набору элементов, на фоне того, что у вас есть пальцы на изменениях.

Кажется, я хочу использовать событие touchmove для этого, но насколько я могу судить, целевой элемент никогда не меняется, даже когда вы перетаскиваете. Клиент X и клиентY меняют, и я нашел эту функцию document.elementFromPoint, которая работает в chrome, но кажется очень круговой (и я не уверен, какие браузеры ее поддерживают)

Посмотрите на эту скрипку, я хочу, чтобы ящики становились зелеными, когда вы касались их:

http://jsfiddle.net/QcQYa/9/

Кстати, в chrome вам нужно зайти на вкладку агента пользователя в конфигурационном модуле инспектора и выбрать "эмулировать события касания", чтобы увидеть мой пример.

Edit: Я нашел идею использовать mouseenter здесь Как обнаружить элементы html на touchmove и заставить его работать на рабочем столе хром, но не на мобильном сафари.

Ответ 1

Я использовал другой подход:

Каждое событие касания Я проверяю, находится ли позиция касания внутри объекта $('.catch').

function highlightHoveredObject(x, y) {
    $('.catch').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $('.catch').removeClass('green');
        $(this).addClass('green');
      }
    });
}

Вы можете видеть, как он работает над jsFiddle.
Он работает на Chrome, я надеюсь, что он также будет работать на мобильных устройствах.

Edit:
В эта скрипка Я использовал обе версии, мои и те, что указаны в ссылке в комментариях (document.elementFromPoint - решение jQuery), оба, похоже, работают на моем телефоне Android. Я также добавил быстрый и грязный тест (см. Консоль), и, как ожидалось, document.elementFromPoint будет на несколько тысячных быстрее, если это вас беспокоит, вы должны проверить поддержку document.elementFromPoint для браузеров, которые вы хотите поддерживать.

Ответ 2

Вы найдете мое решение в этой скрипке, я протестировал его на своем телефоне Android, и он отлично работает, он использует jquerymobile, чтобы воспользоваться событием vmousemove, он также прикрепляет обработчик к событию touchmove только для предотвращения прокрутки просмотра браузера на мобильном устройстве.

Я вставляю здесь соответствующие биты HTML и javascript:

<div id="main" ontouchmove="touchMove(event);">
   <span class='catch'>One</span>
   <span class='catch'>Two</span>
   <span class='catch'>Three</span>
   <span class='catch'>Four</span>
   <span class='catch'>Five</span>
   <span class='catch'>Six</span>
   <span class='catch'>Seven</span>
</div>

теперь javascript:

function elem_overlap(jqo, left, top) {
   var d = jqo.offset();
   return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth)
          && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
   event.preventDefault(); //Prevent scrolling on this element
}

$("#main").bind("vmousemove", function(evt){
   $('.catch').each(function(index) {
      if ( elem_overlap($(this), evt.pageX, evt.pageY) ) {
         $('.catch').not('eq('+index+')').removeClass('green');
         if (!$(this).hasClass('green')) {
            $(this).addClass('green');
         }
      }
   });
});

Ответ 3

Вы не можете "вызвать событие touchhend" или отменить касания, которые вам нужно будет прикоснуться к другому.

Таким образом, вам лучше привязать событие touchmove к контейнеру и манипулировать ящиками на основе их положения/размеров и положения касания, как то, что делает ответ на вопрос Дэн Ли.