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てコードを修正することができました。onoff

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 のonand をoff代わりに使用するよう伝えたいと思いましたdelegate.

于 2013-05-03T16:28:54.457 に答える