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

时间:2016-05-09 10:11:10

标签: javascript jquery html css mobile

我的应用中有一个按字母顺序排列的滚动条(ASB),大多数智能手机都在Contacts个应用中。

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

我尝试了touchstart touchswipe touchend mouseenter mousemovehover没有运气。

以下是您在手机上播放的FiddleCodepen

任何建议都表示赞赏。

4 个答案:

答案 0 :(得分:5)

<强> TL; DR ; touchmovetouchstarttouchend是使这成为可能的事件。

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

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

因此,大多数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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

在父级上绑定touchstart。这样的事情会起作用:

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

您不需要在该功能中执行任何操作,请将其留空。这足以让人在触摸时盘旋,因此触摸行为更像是:悬停而不像:活跃。

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

答案 3 :(得分:0)

您在Fiddle或Codepen中提供的代码工作正常。那有什么大惊小怪的呢?

好吧,在智能手机和平板电脑等大多数空中或触控式小工具中,你不能简单地使用悬停物功能,因为你不能在其上悬停东西来制作一些事件。您只能在使用平板电脑的可拆卸键盘(或使用鼠标或手指滚动条的东西)时使用悬停功能。

相关问题