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

乔兹

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

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

我尝试过touchstart touchswipe touchend mouseenter mousemovehover没有任何失败。

这是小提琴Codepen,可以在您的手机上玩耍。

任何建议表示赞赏。

乔兹

TL; DR ; touchmovetouchstart以及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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何处理智能手机浏览器上的触摸 - javascript

来自分类Dev

我可以在智能手机的浏览器上播放音频()吗?

来自分类Dev

是否可以从浏览器访问智能手机的蓝牙?

来自分类Dev

Div宽度在智能手机中越来越小-在Web浏览器中呈现良好

来自分类Dev

检测平板电脑和智能手机

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

如何使文章在智能手机阅读器上可读?

来自分类Dev

通过智能手机浏览器(ASP.net Core MVC 3.1)查看时,剪切网页的标题

来自分类Dev

哪些视频格式可以普遍观看?(跨浏览器,平板电脑和智能手机等)和标准尺寸

来自分类Dev

为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

来自分类Dev

Windows 10检测到USB闪存驱动器,但未检测到USB相机或智能手机

来自分类Dev

在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

来自分类Dev

像智能手机一样用鼠标滚动

来自分类Dev

检测桌上智能手机的水平和垂直移动

来自分类Dev

检测施加到智能手机的力(而不是加速力)

来自分类Dev

如何通过JavaScript / CSS检测智能手机?

来自分类Dev

plupload智能手机和平板电脑浏览按钮事件未触发

来自分类Dev

Javascript / Jquery在桌面浏览器中运行很快,但在移动/智能手机浏览器中运行缓慢...我应该拆分站点并使用jQuery Mobile吗?

来自分类Dev

OOP设计与智能手机的性能

来自分类Dev

使用libGDX访问智能手机的相机

来自分类Dev

获取智能手机的标识符

来自分类Dev

如何使我的网站响应智能手机

来自分类Dev

如何安装智能手机以恢复文件

来自分类Dev

大屏幕智能手机的RWD失败

来自分类Dev

与iPhone /智能手机共享RAM?

来自分类Dev

从智能手机下载照片

来自分类Dev

仅为智能手机加载不同的JavaScript

来自分类Dev

压缩来自智能手机的视频

来自分类Dev

ExtJS 4 智能手机尺寸

Related 相关文章

  1. 1

    如何处理智能手机浏览器上的触摸 - javascript

  2. 2

    我可以在智能手机的浏览器上播放音频()吗?

  3. 3

    是否可以从浏览器访问智能手机的蓝牙?

  4. 4

    Div宽度在智能手机中越来越小-在Web浏览器中呈现良好

  5. 5

    检测平板电脑和智能手机

  6. 6

    返回浏览器时,PHP会话在智能手机上丢失

  7. 7

    如何使文章在智能手机阅读器上可读?

  8. 8

    通过智能手机浏览器(ASP.net Core MVC 3.1)查看时,剪切网页的标题

  9. 9

    哪些视频格式可以普遍观看?(跨浏览器,平板电脑和智能手机等)和标准尺寸

  10. 10

    为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

  11. 11

    Windows 10检测到USB闪存驱动器,但未检测到USB相机或智能手机

  12. 12

    在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

  13. 13

    像智能手机一样用鼠标滚动

  14. 14

    检测桌上智能手机的水平和垂直移动

  15. 15

    检测施加到智能手机的力(而不是加速力)

  16. 16

    如何通过JavaScript / CSS检测智能手机?

  17. 17

    plupload智能手机和平板电脑浏览按钮事件未触发

  18. 18

    Javascript / Jquery在桌面浏览器中运行很快,但在移动/智能手机浏览器中运行缓慢...我应该拆分站点并使用jQuery Mobile吗?

  19. 19

    OOP设计与智能手机的性能

  20. 20

    使用libGDX访问智能手机的相机

  21. 21

    获取智能手机的标识符

  22. 22

    如何使我的网站响应智能手机

  23. 23

    如何安装智能手机以恢复文件

  24. 24

    大屏幕智能手机的RWD失败

  25. 25

    与iPhone /智能手机共享RAM?

  26. 26

    从智能手机下载照片

  27. 27

    仅为智能手机加载不同的JavaScript

  28. 28

    压缩来自智能手机的视频

  29. 29

    ExtJS 4 智能手机尺寸

热门标签

归档