禁用触摸设备上的点击链接无法按预期工作

Question

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

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

我也想在第二次旋转时阻止此点击事件。 HTML 是标准的 bootstrap 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这是一个网站，不是安卓应用。我找到了可以回答此类问题的答案，适用于 Android 应用程序。

更新我的代码的jsfiddle

Answer 1

我自己解决了。事实证明，宽度检查的条件是造成问题，在我的情况下，这是不必要的，因为引导程序已经将菜单隐藏在较小的屏幕中，而且我的目标是支持触摸的桌面设备。所以我从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');
    }); 

Answer 2

我认为这是您识别移动设备的方式的问题。对于检查设备大小，我不建议使用$(window).innerWidth()。您现在所做的不是检查屏幕大小，而是检查窗口大小，窗口大小在切换方向时会波动。

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

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