Question

嘿伙计我这个jQuery代码有问题。实际上它工作正常，但在关闭div后我无法用我的滚轮滚动。

$(document).ready(function() {
    $("#add_item_inventory_toggle").click(function() {
        $("#add_item_inventory").fadeOut("fast");
        $("#add_item_inventory_toggle").hide();

        $('body').off('scroll mousewheel touchmove', function(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    });

    $("#inventory_content_add_items").click(function() {
        $("#add_item_inventory").fadeIn("fast");
        $("#add_item_inventory_toggle").show();

        $('body').on('scroll mousewheel touchmove', function(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    });
});

Answer 1

我相信你的问题是：

$('body').off('scroll mousewheel touchmove', function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

应该是：

$('body').off('scroll mousewheel touchmove');

当您将函数传递给off时，它会尝试将该特定函数作为该元素上的事件的处理程序。但由于在两种情况下都传递了匿名函数，因此在使用on和off时，它们是函数的两个新实例，即使它们都执行相同的操作。所以它永远不会找到要删除的处理程序。幕后的某个地方想象这两个函数在内存中都有一个独特的位置，因为它们是匿名的并且在两个区域中定义，所以它们并没有指向同一个点。通过不将函数传递给off，它将删除附加到该元素的任何函数。

现在，如果你这样做了：

$(document).ready(function() {
    $("#add_item_inventory_toggle").click(function() {
        $("#add_item_inventory").fadeOut("fast");
        $("#add_item_inventory_toggle").hide();

        $('body').off('scroll mousewheel touchmove', stopScrolling);
    });

    $("#inventory_content_add_items").click(function() {
        $("#add_item_inventory").fadeIn("fast");
        $("#add_item_inventory_toggle").show();

        $('body').on('scroll mousewheel touchmove', stopScrolling);
    });
});

function stopScrolling (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

它会起作用，因为我们将同一个函数引用传递给on和off。

Answer 2

这是因为(function(){ var people = { people: ['Tom', 'Sean'], init: function() { this.cacheDOM(); this.render(); }, cacheDOM: function() { this.input = window.document.querySelector('.input'); this.button = window.document.querySelector('.button'); this.ul = window.document.querySelector('.ul'); }, render: function() { var data = this.people; data.map(function(person){ var li = document.createElement('li'); li.textContent = person; this.ul.appendChild(li); }); } }; people.init(); })();会阻止默认事件发生，在您的情况下，滚动。

http://jsfiddle.net/DHz77/1/

见。

JQuery启用和禁用滚动

2 个答案: