Обнаружение наведения или мыши на смартфоне браузера

Question

У меня есть алфавитная полоса прокрутки (ASB) в моем приложении, которое у большинства смартфонов есть в своем приложении Contacts.

Теперь у меня есть нет проблема прокрутки до определенного пункта, когда мой палец touchstart touchend click etc.. на ASB. Но у меня проблема с захватом hover или mouseover событий на моем смартфоне.

Я пробовал touchstart touchswipe touchend mouseenter mousemove или hover без причалов.

Адрес Fiddle или Codepen для просмотра на вашем мобильном телефоне.

Любое предложение приветствуется.

Answer 1

TL; DR; touchmove, touchstart и touchend - это события, которые сделали это возможным.

---

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

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

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

E.г

var touch = event.originalEvent.changedTouches[0]; 
var clientY = touch.clientY; 
var screenY = touch.screenY; 

И так как я знаю высоту каждой кнопки на моем ASB, я могу просто вычислить, где пользователь наводит элемент на.

Это CodePen, чтобы упростить работу с мобильными сенсорными устройствами. (Пожалуйста, обратите внимание, это работает только на сенсорных устройствах, вы можете использовать хром в режиме переключаемых устройства)

И это мой последний код,

var $startElem, startY; 
 

 
function updateInfo(char) { 
 
    $('#info').html('Hover is now on "' + char + '"'); 
 
} 
 

 
$(function() { 
 
    var strArr = "#abcdefghijklmnopqrstuvwxyz".split(''); 
 
    for (var i = 0; i < strArr.length; i++) { 
 
    var $btn = $('<a />').attr({ 
 
     'href': '#', 
 
     'class': 'btn btn-xs' 
 
     }) 
 
     .text(strArr[i].toUpperCase()) 
 
     .on('touchstart', function(ev) { 
 
     $startElem = $(this); 
 
     var touch = ev.originalEvent.changedTouches[0]; 
 
     startY = touch.clientY; 
 
     updateInfo($(this).text()); 
 
     }) 
 
     .on('touchend', function(ev) { 
 
     $startElem = null; 
 
     startY = null; 
 
     }) 
 
     .on('touchmove', function(ev) { 
 
     var touch = ev.originalEvent.changedTouches[0]; 
 
     var clientY = touch.clientY; 
 

 
     if ($startElem && startY) { 
 
      var totalVerticalOffset = clientY - startY; 
 
      var indexOffset = Math.floor(totalVerticalOffset/22); // '22' is each button's height. 
 

 
      if (indexOffset > 0) { 
 
      $currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset); 
 
      if ($currentBtn.text()) { 
 
       updateInfo($currentBtn.text()); 
 
      } 
 
      } else { 
 
      $currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset); 
 
      if ($currentBtn.text()) { 
 
       updateInfo($currentBtn.text()); 
 
      } 
 
      } 
 
     } 
 
     }); 
 

 
    $('#asb').append($btn); 
 
    } 
 
});

#info { 
 
    border: 1px solid #adadad; 
 
    position: fixed; 
 
    padding: 20px; 
 
    top: 20px; 
 
    right: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="info"> 
 
    No hover detected 
 
</div> 
 
<div id="asb" class="btn-group-vertical"> 
 
</div>

Answer 2

Событие зависания запускается с помощью событий click/touch на мобильном телефоне, потому что вы не можете просто навести элемент на сенсорном экране.

Вы можете продемонстрировать это поведение, просто используя селектор css hover и/или focus для изменения содержимого, вы можете видеть, что перед щелчком элементы остаются неизменными, но после нажатия они сохраняют измененные стили.

Answer 3

связывать touchstart с родителем. Что-то вроде этого будет работать:

$('body').bind('touchstart', function() {}); 

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

Похожий вопрос How do I simulate a hover with a touch in touch enabled browsers?

Answer 4

код, предоставленная Вами в Fiddle или Codepen работает нормально. Так в чем проблема?

Ну, в основном, с помощью электронных или сенсорных триггерных гаджетов, таких как смартфоны и планшеты, вы не можете просто использовать функцию зависания, потому что вы не можете навешивать на нее какие-то события. Вы можете использовать только функцию зависания, когда вы используете, например, съемную клавиатуру для планшета (или что-то, что использует мышь или скроллер пальцев).