JQuery mobile: сделать одно касание - перемещение по нескольким элементам ведет себя как наведение мыши

Question

Я видел много similar questions, но удивительно, что они совершенно разные.

Я хочу, чтобы пользователь с сенсорным экраном мог протащить палец по нескольким элементам на странице одним махом, а по мере того, как его палец перемещается из одного элемента в другой, эти элементы вызывают события, похожие на если мышь была перемещена над ними. Таким образом, каждый элемент будет запускать что-то, что эквивалентно событию touchenter и touchleave или что-то в этом роде.

JQuery мобильный поддерживает ряд сенсорных событий: touchstart, touchend, touchmove, touchcancel, tap, swipe, taphold, но я не могу показаться, чтобы использовать их для достижения.

Скажем, у меня есть п элементов, у меня есть такой код:

 function applyDown(idx){ /*...*/ } 
     function applyUp(idx){ /*...*/ } 
     function go(idx, fn){ 
      return function(){ 
       fn(idx); 
      } 
     } 
     for (var i = 0; i < n; i++){ 
      $(".element_"+i).on("touchstart", go(i, applyDown)); 
      $(".element_"+i).on("touchmove", go(i, applyDown)); 
      $(".element_"+i).on("touchend", go(i, applyUp)); 
     } 

Если я начинаю касаться одного элемента и проведите пальцем к другому элементу, а затем отпустить, то второй элемент никогда не applyDown() называется на ней, и первый элемент имеет только applyUp(), вызываемый, когда палец освобождается от экрана (тогда его следует вызвать, как только палец покинет элемент).

Как я могу достичь того, чего хочу?

Я использовал touchmove, потому что думал, что это решит проблему, но поведение идентично или без него.

Эти элементы на самом деле являются сложными формами SVG, поэтому я не знаю, будет ли это исключать некоторые хакерские (?) Альтернативы, такие как, например, использование javascript для вычисления того, какой элемент палец завершен в любой момент времени ,

Answer 1

Я закончил с использованием Hacky решения: поиск элемента SVG, учитывая положение прикосновения:

 $(document).on("touchmove touchstart", function(event){ 
      var x = event.originalEvent.touches[0].pageX; 
      var y = event.originalEvent.touches[0].pageY; 
      var e = document.elementFromPoint(x, y); 
      // remove existing hover effects 
      $(".element") 
        .attr("stroke-width", "1") 
        .attr("stroke", "#bbb") 
        .attr("fill", "#eee"); 
      // add hover effect to matching element 
      $(e).filter(".element") 
        .attr("stroke-width", "2") 
        .attr("stroke", "#181") 
        .attr("fill", "#afa"); 
     }); 
     $(document).on("touchend", function(event){ 
      $(".element") 
        .attr("stroke-width", "1") 
        .attr("stroke", "#bbb") 
        .attr("fill", "#eee"); 
     });