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

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

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

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

здесь Скрипка или сайт CodePen чтобы поиграть на мобильном телефоне.

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

10
css html javascript jquery mobile

4 ответов

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

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

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

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

Е. Г

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

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

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

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

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>
4

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

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

0

привязать touchstart к родителю. Что-то вроде этого будет работать:

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

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

аналогичный вопрос как имитировать наведение с сенсорным включенными браузерами?

0

код, который вы предоставили в своей скрипке или Codepen, работает нормально. Так что за шум?

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

0