android - 防止 css/jquery 弹出窗口允许点击下面的链接(仅限移动设备)

Question

所以我创建了一个使用 css 和 jquery 的简单弹出窗口。问题是，当弹出窗口被激活时，仍然可以单击弹出窗口下方的链接。有什么办法可以防止这种情况发生。弹出窗口中某些链接的点击框很小，可以轻松点击旁边的链接，这意味着弹出窗口下方的链接已被点击。

我正在处理的网站:taxslayerplayer.com，在 android 上查看它，您就会明白我的意思。另外，我在手机上浏览时在许多其他网站上都遇到过这个问题。

如有指点，不胜感激!

Answer 1

我不确定是否有严格的移动解决方案，但您可以检查弹出窗口是否可见，如果可见，只需在链接的点击处理程序中返回 false:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if ($(popupSelector).is(':visible')) {
        return false;
    }
    else {
        // do whatever you'd normally do with the links
    }
});

或者，您可以改为使用变量，例如 popupIsShown，最初将其设置为 false(在 DOMReady 上)，然后将其设置为 true 当弹出窗口显示时，并在它重新隐藏时重置为 false，使 if 检查的成本更低:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if (popupIsShown) {
        return false;
    }
    else {
        // do whatever you'd normally do with the links
    }
});