Javascript 使用inquire.js退出匹配断点时销毁函数

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

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

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();

任何帮助都将不胜感激。我非常确信这将有助于我目前的处境，但也将有助于我扩大对inquire.js的了解

谢谢

---

编辑：我忘了提。。。如果在500px下加载页面，然后调整页面大小或使页面方向比500px宽，然后在500px下返回，则单击功能将不再工作。。这也让我困惑。我基本上希望它能在低于500px的情况下工作，而在超过500px的情况下根本不工作

我是inquire.js的作者，希望我能帮助你；-）

基本上，您希望在匹配时添加事件处理程序，在取消匹配时删除事件处理程序。您似乎已经掌握了如何执行上述操作的要点，但语法有点错误。一旦语法得到纠正，就需要一些jQuery知识来删除click处理程序

让我们看看语法应该是什么：

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

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

请注意，匹配和取消匹配是提供给

寄存器的单个对象的一部分

理想情况下，您应该将其放入文档就绪回调中。要分配单击处理程序，请使用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();
});​

您可以在此处找到一个工作示例：

那应该就是你所需要的了：）希望这会有帮助
 哈，谢谢你，尼克。我希望你会出现：P。这个答案真的很有帮助，而且对于修复我的一些其他片段来说，有很大的帮助。感谢您的回答，感谢您创建enquire.js。结合Modernizer，它帮助我对为我的工作创建智能javascript增强产生了兴趣。很高兴听到它不仅在这种情况下有帮助，而且在其他情况下也有帮助：）哇，听到它在一定程度上改变了你的工作方式，那就更好了！谢谢你的客气话，很高兴为你服务