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

Question

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

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

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

因此，如果页面加载超过500px，它就会按预期工作。单击将不会执行。如果页面以500px或更低的速度加载，则会执行click函数。唯一的问题是，如果您调整视口的大小或将方向更改为高于500px的值，该函数仍会执行。我希望能够禁用它。

我在这里实际尝试做的真实场景是，我有一个无序的4项列表。超过一定宽度时，它们会立即显示出来。如果在一定的宽度下，我只想隐藏它们，然后单击显示它们。我知道有几种方法(.toggle()、.toggleClass("myclass")等)。

我已经这样做过很多次了，但是我总是在进入/退出断点时被抓到，东西没有被重置，或者按预期工作。通常这并不重要，但最近在我的一些用例中，它变得很重要。

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

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的了解。

谢谢。

编辑:我忘了提...如果页面加载低于500px，然后调整大小或方向超过500px，然后回到500px以下，点击功能将不再起作用。这也让我很困惑。我基本上希望它在低于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/

这应该就是你所需要的了:)希望这会有帮助！