如何在 Jquery 中的 .Off() 之后 .On() 一个事件

Question

我正在创建响应式导航栏。但是我对此 Jquery 有一些问题。如果宽度 <=768，我想禁用悬停事件，并在桌面中启用它。

$(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

一个更容易遵循的模式是在屏幕尺寸改变时简单地设置一个标志并在事件处理程序中检查该标志的状态。否则，您将需要重复 detach/reattach 相同的功能，这并不理想。试试这个：

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...
});

Answer 2

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

例如，如果您在鼠标悬停时切换元素的可见性，则在 CSS 中适当的媒体查询内将此元素设置为 display: none !important;。（即，悬停仍然有效，但结果永远不会出现在 mobile/tablet 台设备上）。

原因

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

如何在 Jquery 中的 .Off() 之后 .On() 一个事件

How to .On() an event after .Off() this in Jquery

javascript

css

jquery

unbind