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

Ответ 1

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

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

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

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

например

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

Код, который вы предоставили в своем Fiddle или Codepen, работает нормально. Итак, какая суета?

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