jQuery blur()....它究竟是如何工作的？答案

【问题标题】：jQuery blur()....How exactly does it work?jQuery blur()....它究竟是如何工作的？
【发布时间】：2013-04-13 05:51:08
【问题描述】：

我为响应式网站创建了一个移动下拉菜单，当您点击某个元素时，它实质上会显示一个隐藏的无序列表。它工作得很好，除了我无法让 blur() 函数工作，因此当用户单击页面上除菜单内部以外的任何位置时，它会隐藏菜单。这是一个代码笔：http://codepen.io/trevanhetzel/pen/wIrkH

我的 javascript 看起来像这样：

$(function() {
    var pull = $('#pull');
    menu = $('header ul');

    $(pull).on('click', function(e) {
        e.preventDefault();
        $('.close-menu').toggle();
        $('.mobi-nav span').toggle();
        menu.slideToggle(250);
    });

    $(menu).blur(function() {
        $(this).slideToggle();
    });
});

我过去一直在与 blur() 作斗争，所以我真的很想一劳永逸地弄清楚它是如何工作的，以及我是否在正确的上下文中使用它。谢谢！

【问题讨论】：

模糊只发生在可以获得焦点的元素上，例如输入元素。
这就是我的问题:)。当您“单击关闭”时，是否还有其他类似的功能适用于常规块元素？
$(document).on('click',function(e){ if ( $(e.target).closest('header').length == 0 && e.target.nodeName != 'HEADER' ) $(menu).slideToggle() }); 还有很多其他方法。您可以使用该解决方案。它处理对文档的每次点击并检查他的目标。
天哪，这太快了！我只是在看stackoverflow.com/questions/1259716/how-to-blur-the-div-element 并试图弄清楚如何实现类似的东西，结果你一头雾水。将其发布为答案！谢谢:)

标签： javascript jquery blur

【解决方案1】：

您必须自己观察点击。并使用$.contains 来查看被点击的东西是否在你的菜单中：

$(document).click(function (ev) {
    if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
       menu.slideUp();
    }
});

请务必在切换单击处理程序中调用 ev.stopPropagation()，以防止上面的处理程序在事件冒泡时立即关闭菜单。

【讨论】：

感谢您的回答。我可以看到这是如何工作的，但认为需要进行一些调整，我正在努力解决这个问题。如果您查看我的测试站点：test.hetzelcreative.com/hybrid 并向下调整浏览器的大小直到出现移动导航，您会注意到单击菜单图标会立即向下和向上切换菜单。所以它并不完全有效，因为菜单不会保持打开状态，直到你像我一样点击它。有什么想法吗？
是的。正文单击处理程序在菜单单击处理程序（事件冒泡）之后触发。仅在菜单切换按钮单击处理程序中添加正文单击处理程序（当您打开菜单时）。并在您关闭菜单时删除处理程序。
好吧，我意识到它是在菜单点击处理程序之后触发的，但把它放在它之前也不能解决问题。我不确定我在哪里迷路了，但这是我实现它的方式：codepen.io/trevanhetzel/pen/wIrkH 我将把正文点击处理程序移到哪里？
实际上最简单的方法是在拉取事件处理程序中停止事件传播。我更新了您的示例（并将点击绑定到document 而不是body）：codepen.io/anon/pen/ipGvA
@TrevanHetzel，我认为 iPhone 作为移动设备使用了其他事件。尝试使用touchstart 事件。 $(document).on('touchstart click',func...