2

我正在创建一个响应式模板，并且我想在调整屏幕大小或小于指定宽度时删除元素上的侦听器。
想象一个菜单，当您将鼠标悬停在其项目上时，它会在正常显示中向您显示子菜单，但移动设备中的相同菜单只能通过点击或单击项目来显示子菜单。

我无法使取消委托工作。在调整大小的屏幕中，我仍然有mouseover和mouseout事件监听器。我在控制台中没有收到任何错误，并且我都尝试了：

  • .off('mouseover', 'li')
  • .off('mouseover')
  • .undelegate('li', 'mouseover')
  • .undelegate('li')


而且它们都不起作用。

var $window = $(window);
    function handleSidenav() {
    $(".nav-list").delegate('li', 'mouseover', function(e) {
        $(this).find("a").addClass('active');
        $(this).find("div.sub-items").toggle();
    }).delegate('li', 'mouseout', function(e) {
        $(this).find('a').removeClass('active');
        $(this).find("div.sub-items").toggle();
    });
}

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize < 767) {
        smallScreenDelegation();
    } else {
        SmallScreenUndelegation();
    }
}
checkWidth();
handleSidenav();
$window.resize(checkWidth());

function smallScreenDelegation() {
    $(".nav-list").undelegate('li'); //It's not working
    $(".nav-list").undelegate('li'); //It's not working
    $(".nav-list").delegate('li a:first', 'click', function(event) {
        if ($(this).next().is(':hidden')) {
            $(this).addClass('active');
            $(this).next().slideDown('slow');
        } else {
            $(this).removeClass('active').next().slideUp('slow');
        }               
        event.preventDefault(); 
    });
}
4

2 回答 2

1

您需要将窗口包装在 jQuery 对象中。我不确定你是否设置了 $window = $(window)，但这里似乎 $window.width() 和 $window.resize(checkWidth) 缺少括号。一旦我将它们更改为 $(window)，我就能让它正常工作。您必须定义要取消授权的事件。我用了：

 $('.nav-list').undelegate('li', 'mouseover');

打开控制台，您可以看到它可以工作：http: //jsbin.com/efonut/6/edit

此外，最好使用 .on() 和 off() 与 .delegate() 和 .undelegate()，但至少这有效......

于 2013-04-28T23:25:31.233 回答
0

我仍然不知道undelegate我无法使它工作的问题，但我设法通过使用onand修复了我的代码off。

正如adeneo 所说，我在每个窗口调整大小上都进行了委派和取消委派，这是一个安静的错误，我认为我修复了该问题，但将最后一个状态保持在device变量上。

var $window = $(window);
var device;

function desktopSidenav() {
    $(".nav-list > li").off('click');
    $(".nav-list > li").on('mouseover', function(e) {
        $(this).find("a").addClass('active');
        $(this).find("div.sub-items").toggle();
    }).on('mouseout', function(e) {
        $(this).find('a').removeClass('active');
        $(this).find("div.sub-items").toggle();
    });
}

function handheldSidenav() {
    $(".nav-list > li").off('mouseover').off('mouseout');
    $(".nav-list > li").on('click', function(e) {
        if ($(this).find("div.sub-items").is(':hidden')) {
            $(this).find("a:first").addClass('active').next().slideDown('slow');
        } else {
            $(this).find("a:first").removeClass('active').next().slideUp('slow');
        }               
        e.preventDefault(); 
    });
}

现在我在做任何其他事情之前检查窗口大小，并将设备类型保存在device变量中。如果调整窗口大小，我将检查设备状态并根据设备类型执行操作。

if ($window.width() > 767) {
    device = 'desktop';
    desktopSidenav();
} else {
    device = 'handheld';
    handheldSidenav();
}
$window.resize(function() {
    if ($window.width() > 767) {
        if (device == 'handheld') {
            device = 'desktop';
            desktopSidenav();
        }
    } else {
        if (device == 'desktop') {
            device = 'handheld';
            handheldSidenav();
        }
    }
});

如果我使用delegateandundelegate而不是onand off，代码将不起作用，我仍然不知道为什么，所以这不能算作一个真正的答案，但我想告诉每个有类似问题的人使用 jQuery 的on而off不是delegate.

于 2013-05-03T16:28:54.457 回答