如何使用hammer.js防止默认触摸

Posted 2023-05-07

【中文标题】如何使用hammer.js防止默认触摸

【英文标题】：How to prevent default on touch with hammer.js

【发布时间】：2013-03-02 13:39:20

【问题描述】：

如果用触摸设备点击锚点，我想阻止它点击，但如果用鼠标点击，我想正常操作。

原因是，在桌面上，您将鼠标悬停在锚点上以查看更多信息，然后单击以查看产品。

在手机上，我希望第一次点击显示信息，第二次点击查看产品。

我已经尝试了以下各种变体：

$('article.product aside a.link').hammer().on('tap', function(ev) 

    if (ev.gesture.pointerType == 'touch') 
        ev.gesture.srcEvent.preventDefault();

        return false;
    

);

有人对此有什么想法吗？

【问题讨论】：

你能做一个小jsfiddle吗？

当您使用智能手机时，pointerType 是否被正确识别？

我认为这种方法行不通，我也无法让它发挥作用。看到这个：jsfiddle.net/FUZwZ/2 如果我在 PC 上的 Chrome 中点击它，它会给我两个提示，一个是点击，一个是点击。如果我在我的 Galaxy Nexus（使用 Chrome）上点击相同的链接，它只会注册点击。我敢打赌它因浏览器而异，所以我认为这不会奏效。

@Bigood 是的，指针类型检测正确

@qwerty 我整理了一个快速的 jsfiddle：jsfiddle.net/qJEne/1

【参考方案1】：

jQuery mouseover 适用于移动设备（至少在 ios 中）。我创建了一个使用mouseover 的小提琴，并告诉链接在没有opacity 1 的情况下不要触发。

http://jsfiddle.net/FyF3b/5/

我在 chrome 和 iPhone 4S 上对此进行了测试，它似乎符合您的要求。让我知道它是否适用于您的关系。

JS：

$('aside').on('mouseover mouseout', function() 
  $(this).toggleClass('on'); 
);
$('aside a').on('click', function(event) 
  if ($(this).parent().css('opacity') < 1) 
    event.preventDefault();
  
);