如何禁用触摸设备的链接答案

【问题标题】：How to disable links for touch devices如何禁用触摸设备的链接
【发布时间】：2020-05-04 17:48:44
【问题描述】：

我打算使用某种工具提示功能。在桌面上，我希望它以悬停效果打开，并且在用户点击时也有一个链接和直接。在触摸设备上，我想禁用链接并仅通过触摸（单击任何内容）打开工具提示。所以基本上，我需要禁用触摸设备的链接。为此分配一个 CSS 类会非常有用。

感谢您的帮助。干杯。

【问题讨论】：

您可以使用 :hover 吗，因为触控设备不支持，而非移动设备支持？
以后最好把你已经尝试过的说出来。

标签： javascript jquery css

【解决方案1】：

JavaScript：

if ('ontouchstart' in window) {
    $("a").click(function (e) {
        e.preventDefault();
        // trigger tooltip...
    });
}

如果您不希望所有 <a>s 都成为目标，请将选择器更改为更具限制性的内容。

此外，最好将 Modernizr 用于这些事情。如果您可以包含另一个库，它会做得很好。这是一个仅测试触摸事件的自定义构建的链接：http://modernizr.com/download/#-touch-teststyles-prefixes

然后将IF的条件替换为Modernizr.touch。

【讨论】：

【解决方案2】：

我使用了 JS 方法，在第一个触摸事件上设置了 data-* 属性，并使用 event.preventDefault() 取消链接操作。如果触发了第二次触摸事件（即用户第二次触摸），我现在可以检查是否设置了 data-* 属性并且什么都不做——这意味着事件处理程序返回了 true 并执行了链接操作。这在处理弹出菜单时很常见，其中第一级项目也链接到某种子页面。

【讨论】：

【解决方案3】：

在 JS 中检测触摸屏的另一种方法是使用 MatchMedia API。


// target touchscreens of any viewport width
if(window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
// target touchscreens of a specific width
// if(window.matchMedia("(hover: none) and (pointer: coarse) and (min-width: 1024px)").matches) {

  var links = document.querySelectorAll("a");

  for (var i = 0; i < links.length; i++) {

    var link = links[i];

    link.addEventListener("click", function(e) {
      e.preventDefault();
    }, false);

  }

}

// This obviously targets all links, so you'll need to be more specific than this.

【讨论】：