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

Posted 2023-03-06

【中文标题】在智能手机浏览器上检测悬停或鼠标悬停

【英文标题】：Detecting hover or mouseover on smartphone browser

【发布时间】：2016-09-03 22:18:46

【问题描述】：

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

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

我尝试过touchstart touchswipe touchend mouseenter mousemove 或hover，但没有成功。

这里是 Fiddle 或 Codepen 在您的手机上玩。

欢迎提出任何建议。

【问题讨论】：

不确定我是否理解您想要实现的目标？悬停对我有用吗？

@SCraig 在您的移动浏览器上运行良好吗？

智能手机上没有悬停。该设备无法检测到它。你只会得到点击、拖动等。

手机上的hover 事件应该是什么？我想它必须是某种点击事件，或者至少是屏幕上的某种触摸事件。

@Error404 绝对不是click 事件.. 但可能类似于touch 事件..

【参考方案1】：

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

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

【参考方案2】：

在父节点上绑定 touchstart。这样的事情会起作用：

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

您无需在函数中执行任何操作，请将其留空。这足以在触摸时获得悬停，因此触摸的行为更像 :hover 而不太像 :active。

类似问题How do I simulate a hover with a touch in touch enabled browsers?

【讨论】：

只有当我们触摸身体时才会触发该事件。这不允许我拖动和检测元素上的悬停。

【参考方案3】：

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

嗯，在智能手机和平板电脑等大多数空气或触摸触发小工具中，您不能简单地使用悬停事物功能，因为您无法将事物悬停在其上来进行某些事件。您只能在使用例如平板电脑的可拆卸键盘（或使用鼠标或手指滚动器的东西）时使用悬停功能。

【参考方案4】：

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>

【讨论】：

关于touch事件javascriptkit.com/javatutors/touchevents.shtml的有用资源