禁用触摸设备上的单击链接未按预期工作

disable click link on touch devices not working as expected

本文关键字：链接 工作 单击 触摸      更新时间：2023-09-26

我想做什么我有悬停时打开的下拉菜单，父菜单有自己的登录页面链接。我们不愿意牺牲这种行为，但如果明显会给支持大型触摸的设备带来问题。因此，我正在使用jquery检测触摸设备，并在大于990px宽的设备上禁用父菜单单击。低于 990 像素的设备被视为移动视图，它会切换到切换。切换和桌面视图之间的这种切换预计也会在屏幕旋转时继续。

发生了什么事情菜单链接在首次加载时被禁用，并按预期工作。然后我旋转屏幕（从横向到纵向），并按预期查看移动菜单并导航到另一个页面。页面加载后，我再次旋转它（从纵向到横向），桌面视图可见，但父链接现在可以单击！

我也想在第二次旋转时防止此单击事件。HTML 是标准的引导程序 3 导航代码，我的 js 是这样的：

 function isTouchDevice() {
        return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
    }
$(document).ready(function () {
        $(window).resize(function () {
            var o = $(window).innerWidth();
            function isTouchDevice() {
                return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
            }
            if ((isTouchDevice() === true) && (o >= 990)) {
                $('.navbar .dropdown > a ').each(function () {
                    $(this).on("click", function(){
                        return false
                    })
                })
                alert('oi!!')
            }
            else {
                $('.navbar .dropdown > a ').each(function () {
                    $(this).on("click", function(){
                        location.href = this.href;
                    })
                });
                alert ("bad!") //for debugging purpose, not really needed
            }
        }).resize();

        //the mobile menu clicks events
        $('#menu .dropdown > a ').click(function () {
            location.href = this.href;
        });
    });

PS这是一个网站，而不是安卓应用程序。我找到了回答安卓应用程序此类问题的答案。

更新我的代码的 jsfiddle

我自己解决了。事实证明，宽度检查的条件造成了问题，就我而言，这是不必要的，因为引导程序已经将菜单隐藏在较小的屏幕中，并且无论如何我都针对支持触摸的桌面设备。所以我从if状态中取出了&& (o >= 990)，它正在按预期工作。

完整的JS在下面（以防有人需要它）。我使用计时器来防止事件在调整大小之前触发，但它也可能在没有计时器的情况下工作。:

$(document).ready(function () {
        var resizeTimer;
        $(window).on('resize', function(e){
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                function isTouchDevice() {
                    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
                }
                if (isTouchDevice() === true) {
                    $('.navbar .dropdown > a ').click(function () {
                        return false
                    });
                    console.log("landscape")
                }
                else {
                    $('.navbar .dropdown > a ').each(function () {
                        $(this).on("click", function(){
                            location.href = this.href;
                        })
                    });
                    console.log("portrait")
                }
            }, 250)
        }).trigger('resize');
    });

我认为这是您识别移动设备的方式存在问题。为了检查设备尺寸，我不建议使用$(window).innerWidth()。您现在正在执行的操作不会检查屏幕大小，而是检查窗口大小，该大小在切换方向时会波动。

我想建议不要只检查>900像素，而是检查设备的整个区域（宽x高），以便横向和纵向以相同的方式工作。我想建议使用screen.availHeight * screen.availWidth来确定这一点。

我真的希望这对您的问题有所帮助。如果没有，请告诉我，我会帮你调试。

相关文章：