在智能手机浏览器上检测悬停或鼠标悬停 [英] Detecting hover or mouseover on smartphone browser

问题描述

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

I have an alphabetical scrolling bar (ASB) in my app, which most smartphones have in their Contacts app.

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

Now, I have no problem to scroll to specific item when my finger touchstart touchend click etc.. on the ASB. But, I have problem on capturing hover or mouseover event on my smartphone.

我尝试了touchstart touchswipe touchend mouseenter mousemove或hover但没有任何困难.

I have tried touchstart touchswipe touchend mouseenter mousemove or hover with no lucks.

这里是 小提琴 或

Here's the Fiddle or Codepen to play around on your mobile.

任何建议都值得赞赏.

推荐答案

TL; DR ; touchmove，touchstart和touchend是使之成为可能的事件.

TL;DR; touchmove, touchstart and touchend are the events that made this possible.

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

I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.

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

But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.

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

So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.

例如

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

由于我知道ASB上每个按钮的高度，因此我可以计算出用户将元素悬停在其上的位置.

And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.

以下是> 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>

这篇关于在智能手机浏览器上检测悬停或鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！