在智能手机浏览器上检测悬停或鼠标悬停

choz 发表于 Dev

103

乔兹

我的应用程序中有一个字母滚动条（ASB），大多数智能手机在其Contacts应用程序中都有。

现在，我有没有问题，滚动到具体项目时我的手指touchstart touchend click etc..上的ASB。但是，我在智能手机上捕获hover或mouseover事件时遇到问题。

我尝试过touchstart touchswipe touchend mouseenter mousemove或hover没有任何失败。

这是在手机上播放的小提琴或Codepen。

任何建议表示赞赏。

乔兹

TL; DR ; touchmove，touchstart以及touchend使之成为可能的事件。

我发现人们不断告诉我，非本地应用程序不可能在智能手机上提供悬停事件的功能。

但是，现代智能手机浏览器实际上已经提供了功能。我意识到解决方案实际上位于一个非常简单的地方。通过一些调整，我弄清楚了如何将这种行为模拟为跨平台，即使它有点作弊。

因此，大多数用户touchevents都在传递参数，这些参数具有用户在屏幕上触摸所需的信息。

例如

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

而且，由于我知道按钮上每个按钮的高度ASB，因此我可以计算出用户将元素悬停在何处。

这是CodePen，可在移动触摸设备上更轻松地尝试。（请注意，这仅适用于触摸设备，您仍可以在切换的设备模式下使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。