javascript - 使用 javascript 在移动触摸设备上处理带有链接的悬停覆盖图像

Question

这是我在这里的第一篇文章，它不是一个问题，而是一个解释。

为了回答我的问题，我搜索了很长时间，发现了很多不同的答案，几乎没有一个是正确的。即使我确实找到了正确的答案，它仍然是部分错误的。我终于以我认为最好的方式解决了这个问题。所以我想我确实有一个问题要问社区......你有更好的方法来解决这个问题吗？我注意到的一个问题是，这种方法没有考虑到也有鼠标的触摸设备，比如触摸屏笔记本电脑，我可能会想办法激活该功能，touchstart而不是像我做的那样，但是我对 javascript 或 jquery 了解不足，无法使其正常工作。就我的目的而言，这已经足够了！当然比我尝试过的其他任何东西都要好...

所以情况是这样的：您的网站上有带有悬停功能的链接的图像。您希望桌面上的某人能够将鼠标悬停在图像上，查看悬停效果，单击一次并被带到链接。但是您希望移动设备上的某人能够点击一次，查看悬停效果，然后再点击一次并被带到链接。

这是我的代码的 jsfiddle：https ://jsfiddle.net/claytr0n/ozrLub72/8/

作为额外的奖励，您将看到集成 .webp 图像的正确方法，同时保持 .png 后备以及优化图像加载时间。如果您的网站几乎完全基于图像，我强烈建议您创建图像的 .webp 版本，就像我的网站一样！

您要注意什么，至于帮助我解决问题的事情以及我在此过程中注意到的事情……给:hover事件标记pointer-events: none;非常重要，因为没有它，javascript 不知道您是否在点击文本，图像或叠加层，并且如果您碰巧单击了两次相同的链接，则只会在第二次点击时触发链接。将 click 函数指向.rig-cell自身将触发链接，并且pointer-events: none;事件:hover会阻止它们干扰。

在 javascript 中设置它是我发现只有双击发生在移动设备上而不发生在桌面上的最好方法。以前的方法是在触摸设备上激活它，但它正在寻找支持触摸的浏览器，我猜现在大多数都是这样，并且导致桌面必须单击两次才能触发链接。

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

好吧，这就是我的故事！试试我的 jsfiddle 在移动设备上，看看第一次点击管理悬停事件的威力，第二次点击触发链接......故意！我希望有人觉得这很有帮助，我也许可以为他们省去我遇到的麻烦。哦！如果你是一个 javascript jquery 向导并且你认为这很笨拙或者你可以做得更好，我很想学习你的方法。

谢谢！

标签： javascriptimagemobilehovertap