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

时间:2016-04-24 17:33:24

标签: javascript jquery css twitter-bootstrap-3

我想要做的事 我有下拉菜单,在悬停时打开,父菜单有自己的登录页面链接。我们不愿意牺牲这种行为,但如果显然会为大型触控设备带来问题。因此,我正在使用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}}

2 个答案:

答案 0 :(得分: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');
    }); 

答案 1 :(得分:0)

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

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

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