javascript - 使用 enquire.js 退出匹配的断点时销毁函数

Question

这可能是大多数阅读的基础，但我似乎无法理解。

如果在一定宽度下，我想执行一个小测试函数。当屏幕旋转或调整大小超过该宽度时，我希望该功能停止工作。为简单起见，这里有一些示例代码。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    }
}).listen();

因此，如果页面加载超过 500 像素，它会按预期工作。单击不会执行。如果页面以 500 像素或以下加载，则执行点击功能。唯一的问题是，如果您调整视口(viewport)大小或将方向更改为 500 像素以上，该函数仍会执行。我希望能够禁用它。

我实际上想在这里做的现实世界场景是我有一个包含 4 个项目的未排序列表。超过一定宽度，它们会立即显示。如果在一定宽度下，我只想隐藏它们并单击显示它们。我知道有几种方法可以做到这一点(.toggle()、.toggleClass("myclass") 等)。

我已经这样做了很多次，但我总是遇到进入/退出断点和未重置或按预期工作的事情。通常这无关紧要，但最近在我的一些用例中它变得很重要。

我知道不匹配选项，但我不确定如何真正杀死上面的匹配函数。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    },
    {
        unmatch : function() {
        // what do I do here do kill above?
        }
    }
}).listen();

如有任何帮助，我们将不胜感激。我很确定它会对我目前的情况有所帮助，但也会帮助我扩展 enquire.js 的其他知识。

谢谢。

编辑:我忘了提...如果您将页面加载到 500 像素以下，然后调整大小或调整到比 500 像素更宽，然后返回到 500 像素以下，点击功能将不再起作用。这也让我感到困惑。我基本上希望它在 500px 以下时无论如何都能工作，而在超过 500px 时根本无法工作。

Answer 1

我是 enquire.js 的作者，希望我能帮到你 ;-)

基本上，您希望在匹配时添加事件处理程序并在不匹配时删除事件处理程序。您似乎掌握了上面如何执行此操作的要点，但是您的语法有点错误。一旦语法得到纠正，只需一些 jQuery 知识即可删除点击处理程序。

那么让我们看看语法应该如何:

enquire.register("screen and (max-width:500px)", {
    match: function() {
        //match code here
    },

    unmatch: function() {
        //unmatch code here
    }
}).listen();

请注意，匹配和取消匹配是提供给register 的单个对象的一部分。

理想情况下，您应该将其放入文档就绪回调中。要分配您的点击处理程序，请使用 jQuery 的 on 方法，因为这允许您使用 off 方法取消分配:

$(".block .block-title").on("click", function() {
    alert("hello");
});

$(".block .block-title").off("click");

这很棒，因为您甚至可以为您的事件命名空间，请阅读 jQuery 文档以了解更多详细信息。所以把它们放在一起，我们会有这样的:

$(document).ready(function() {

    var $target = $(".block .block-title");

    enquire.register("screen and (max-width:500px)", {
        match: function() {
            $target.on("click", function() {
                alert("Hello World!");
            });
        },
        unmatch: function() {
            $target.off("click");
        }
    }).listen();
});​

您可以在这里找到一个工作示例:http://jsfiddle.net/WickyNilliams/EHKQj/

那应该就是您所需要的了:)希望对您有所帮助!