Question

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

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

我想在第二次旋转时阻止此点击事件。 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应用。我找到了解答Android应用程序这类问题的答案。

更新我的代码{/ 3}}

Answer 1

我自己解决了。事实证明，宽度检查的条件是创建问题，在我的情况下，没有必要，因为bootstrap已经将菜单隐藏在较小的屏幕中，无论如何我都是针对支持触摸的桌面设备。所以我从&& (o >= 990)条件中取消if，它按预期工作。

完整的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()。你现在正在做的是不检查屏幕尺寸，而是检查窗口大小，当切换方向时，窗口大小会波动。

我建议您不要只检查＆gt; 900px，而是检查设备的整个区域（宽x高），以便横向和纵向的行为方式相同。我建议使用screen.availHeight * screen.availWidth来确定这一点。

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

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

2 个答案: