Question

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

感谢您的帮助。欢呼声。

Answer 1

JavaScript的：

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

如果您不希望所有<a>被定位，请将选择器更改为更严格的选项。

此外，使用Modernizr进行这些操作会更好。如果你能包括另一个图书馆，它会做得很好。这是指向仅测试触摸事件的自定义构建的链接：http://modernizr.com/download/#-touch-teststyles-prefixes

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

Answer 2

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

Answer 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.

如何禁用触摸设备的链接

3 个答案: