在多个 div 上通过触摸模拟 HTML 悬停



我正在尝试弄清楚如何使用触摸移动事件模拟iOS上的悬停/鼠标输入功能。

我想在iOS上复制BigGraph悬停效果。如果您不熟悉它,链接如下。请注意,当您将鼠标悬停在正方形上时,它们会扩展,然后在移除悬停时折叠。

http://isotope.metafizzy.co/custom-layout-modes/big-graph.html

在 BigGraph 中,您会注意到悬停在行为上,我正在尝试在触摸设备上复制它。我正在努力找出一种方法来在屏幕上移动手指并使框扩展。由于不支持悬停,我认为触摸移动将是一种选择。

我已经能够使用触摸开始和触摸结束事件展开项目,但似乎触摸移动无法捕获您悬停在上面的 DIV,因此我无法捕获项目以展开它。

下面是一个简单的片段,任何想法将不胜感激。感谢

$(".item").bind("touchstart", function(e){
    log("touch start");
    $(e.currentTarget).find('.icon').css("background-color", "red");
    e.preventDefault();
});
$(".item").bind("touchend", function(e){
    log("touch end");
});
.big-graph .item:hover .icon {
  -webkit-transform: scale(2);
     -moz-transform: scale(3);
      -ms-transform: scale(3);
       -o-transform: scale(3);
          transform: scale(3);
}

我不确定您要用触摸移动捕获什么。但是要模拟盒子膨胀和折叠的悬停

$('.item').bind('touchstart', function() {
    // expand box
});
$('.item').bind('touchend', function() {
    // collapse
});

我认为你根本不需要触摸移动,除非我错过了什么。也许有一种行为你想要但没有明确提及?

我不是iOS程序员,但你能以某种方式使用多点触控功能吗?例如,单指触摸是"点击";2 指触摸是"悬停"。或切换按钮(单击/悬停(。

最新更新