Question

我正在创建一个自适应导航栏。但我对这个Jquery有一些问题。如果width＆lt; = 768，我想禁用悬停事件，并在Desktop中启用它。

$(window).on('load resize', function (e) {
    var w = $(window).width();
    if (w <= 768) {
        $('nav').css({ display: "none" })
        $('#last').off('mouseenter mouseleave mouseover mouseout');
    }
    if (w > 768) {
        $('nav').css({ display: "block" })
        $('#last').on('mouseenter mouseleave mouseover mouseout', function() { });
    }
});

这段代码有什么问题？帮帮我

Answer 1

作为替代方法，我建议您在CSS中执行此操作（取决于您的处理程序将执行的操作）。

例如，如果您在悬停时切换元素的可见性，则在CSS中的相应媒体查询中将此元素设置为display: none !important;。（即悬停仍然可以正常工作，但结果将永远不会出现在手机/平板设备上。）

<强>原因

你在窗口调整大小时有一个JS事件，你甚至没有限制它。这意味着您将不必要地对浏览器征税。这不是一项艰巨的任务，但如果它可以用CSS解决，你应该考虑这样做。

Answer 2

更容易遵循的模式是在屏幕大小更改时简单地设置标志并检查事件处理程序中该标志的状态。否则你需要重复分离/重新连接相同的功能，这不是理想的。试试这个：

var lowRes = false;

$(window).on('load resize', function (e) {
    lowRes = $(window).width() <= 768;
    $('nav').css({ display: lowRes ? "none" : 'block' })
}); 

$('#last').on('mouseenter mouseleave mouseover mouseout', function() {
    if (lowRes) 
        return;

    // logic here...
});

如何.On（）在Jquery中的.Off（）之后的事件

2 个答案: