Javascript 防止触摸超链接并显示悬停状态

我不知道为什么，但当我在iPhone/平板电脑上构建的网站上点击链接时，它不会触发悬停状态，而是直接跳转到链接。您可以在这里看到测试站点

链接只是大图像，悬停状态显示项目名称，这就是为什么第一次触摸触发悬停状态，然后用户需要再次触摸才能进入项目的原因

我在这里搜索了touchstart示例，并试图从中解决我自己的问题，但没有结果

这是HTML

<div class="projectContainer">
    <a href="<perch:content id="url" label="URL" required="true" />" class="projectOverlay">
        <h1><perch:content id="title" type="text" label="Heading" required="true" /></h1>
    </a> 
    <img src="<perch:content id="image" type="image" label="image" />" />

任何帮助都将不胜感激

非常感谢

有时候我也会遇到同样的“问题”（实际上这是正确的行为）。要修复它，您需要一点javascript

首先，让我们检测触摸事件。您可以使用Modernizer实现此功能，这是实现此功能的最小捆绑包：

1） 将生成的脚本包括在

部分：如果支持触摸事件，Modernizr将向页面的

元素添加一个“触摸”类，如果不支持触摸事件，则添加一个“无触摸”类

2） 如果启用了“触摸”事件，我们需要添加一个javascript侦听器，以在第一次单击时模拟悬停状态：

if(Modernizr.touch){

    var hoverClass = 'projectContainer-hover', // the "simulated hover" class
        $projectContainers = $('.projectContainer');

    $projectContainers.on('click',function(event){
        var $this = $(this);
        if(!$this.hasClass(hoverClass)){
            event.preventDefault();
            $projectContainers.removeClass(hoverClass);
            $this.addClass(hoverClass);
            return false;
        }
    }).on('focusout',function(){
        // remove the class if the user focuses on another element
        $(this).removeClass(hoverClass);  
    });
}

我假设您正在使用jQuery。如果您不是，并且需要支持较旧的IE，那么您应该知道按其类选择元素

3） 最后，通过以下方式更改css选择器：

.projectContainer:hover .projectOverlay, .projectContainer-hover .projectOverlay {
    // ...etc...    
}

---

注意：这种方法一点也不完美，因为现在很多笔记本电脑都启用了触摸事件。任何启用了触摸事件的设备都需要双击才能实现。由你来决定是否值得

---

Atm我认为唯一的选择是用户代理欺骗，这是你真正想要避免的

在基于触摸的设备上，触摸相当于单击，没有

：hover

。注意这不是答案，但您可能会发现jQuery touchpunch库可以帮助您在许多情况下自动连接。这意味着它可能无法解决这个问题，但将来可能会为您解决其他问题。你可以考虑和研究。没有悬停，但至少有一个CSS值至少在Safari有WebKIT TAP亮点颜色：这可能会有帮助。啊，太好了，非常感谢。Giona工作很好。我只遇到一个问题。如果触摸一个项目以显示悬停，然后触摸另一个项目以使上一个悬停消失并显示新的悬停，然后返回以触摸第一个项目，而不是悬停显示它直接进入链接。你知道有没有办法在每次触摸后重置它？谢谢你的帮助。是的，在iPad和iPhone上看到了这个问题。。。检查我的编辑，它现在应该可以工作了；-）太棒了，谢谢@Giona现在工作得很好，我已经在线更新了文件，所以人们可以看到它在工作。谢谢你的帮助。很高兴帮忙；-）ciao@tobias_Burkill注意，Modernizer添加的“touch”类仅显示浏览器支持触摸交互，而不一定设备支持触摸交互。这可能会导致问题-例如，请参阅

.projectContainer:hover .projectOverlay, .projectContainer-hover .projectOverlay {
    // ...etc...    
}