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

Detecting hover or mouseover on smartphone browser

本文关键字：悬停 鼠标 浏览器 检测 智能手机      更新时间：2023-09-26

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

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

我试过touchstart touchswipe touchend mouseenter mousemove或hover，但没有运气。

这是Fiddle或Codepen，可以在手机上玩。

欢迎提出任何建议。

TL；DR；CCD_ 7、CCD_ 8和CCD_。

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

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

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

E.g

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>

悬停事件是由手机上的点击/触摸事件触发的，因为你不能简单地将元素悬停在触摸屏上。

您可以通过简单地使用css悬停和/或焦点选择器来修改内容来演示这种行为，您可以看到，在单击之前，元素保持不变，但在单击之后，它们保留了修改后的样式。

在父级上绑定touchstart。这样的东西会起作用：

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

你不需要在函数中做任何事情，把它留空。这将足以在触摸时获得悬停，因此触摸的行为更像：悬停，而不像：活动。

类似的问题我如何在支持触摸的浏览器中模拟触摸悬停？

您在Fiddle或Codepen中提供的代码运行良好。那有什么大惊小怪的？

好吧，在智能手机和平板电脑等主要是空气或触摸触发的小工具中，你不能简单地使用悬停功能，因为你不能将东西悬停在上面来进行一些活动。例如，当你使用平板电脑的可拆卸键盘（或使用鼠标或手指滚动器的东西）时，你只能使用悬停功能。

相关文章：