javascript - 在浏览器调整大小时更改超链接位置

Question

我试图在浏览器调整大小时更改我的超链接指向的位置，但是我要么阻止我的所有链接，要么一个都不阻止

var $w = window.innerWidth || document.documentElement.clientWidth;

if ($w > 1025) {
    $('a.something').each(function (e) {
        e.preventDefault();
        location.href = "/products.html";
    });
} else {
    $('a.something').each(function (e) {
        e.preventDefault();
         location.href = "javascript:void(0);";
    });
}

if ($w > 1025) {
    $('.mainMenu > li').unbind().hover(function () {
        $(this).find('.subMenu').stop().slideToggle(400);
    });
} else {
    $('.mainMenu > li').unbind().click(function (e) {
        $(this).find('.subMenu').stop().slideToggle(400);
    });
}

Answer 1

在每次调整大小时进行多次 DOM 更改可能代价高昂并且会降低您的网站速度。我建议让功能根据浏览器大小确定要采取的操作。

$(document).on('click', 'a[href]', function (e) {
    var width = window.innerWidth || document.documentElement.clientWidth;

    if (width < 1025) {
       e.preventDefault();
    }
});

这只会在 View 尺寸较小(低于 1025 像素)时阻止链接。

$('.mainMenu > li').on('hover click', function () {
    $(this).find('.subMenu').stop().slideToggle(400);
});

您可以同时进行两个绑定(bind)。如果您真的需要，您可以在此 block 中放置与上面相同的 if，但我认为在大多数情况下，您可以保持原样。