模糊事件不适用于 div答案

【问题标题】：Blur event not works for div模糊事件不适用于 div
【发布时间】：2014-06-18 08:28:35
【问题描述】：

这是我下面的代码，当我点击它时，我试图隐藏addstuff id div。我尝试了身体点击事件，但它没用。所以我需要一个像模糊这样的触发事件。但它不适用于 blur 和 focusout 事件。

$(document).ready(function() {
            $('#addstuff').blur(function () { $('#addstuff').fadeOut() })
 })

【问题讨论】：

#addstuff 是一个 div 吗？
div 没有blur（或focus）事件
...div 没有blur 和focus 的原因是“焦点”与当前编辑位置（即键盘焦点控件）有关，因此通常只能应用于输入-type 元素（HTML 5 确实允许关注非输入元素，但那是不可移植的）。

【解决方案1】：

div 没有模糊事件。您可以使用 body 的点击事件创建该效果。注意，您应该从点击事件中排除该 div

$(document).ready(function () {
    $("body").not("#addstuff").click(function (e) {
        $("#addstuff").fadeOut();
    });
});

编辑

正如@TrueBlueAussie 所建议的，最好使用document 而不是'body' 作为点击事件处理程序：

   $(document).not("#addstuff").click(function (e) {
       $("#addstuff").fadeOut();
   });

【讨论】：

您可能希望将点击附加到document 而不是'body'，因为body 可能会对点击产生奇怪的副作用（绝对位置元素会导致不接受的零高度主体点击某些浏览器）
@TrueBlueAussie 感谢您的建议。我会编辑答案

【解决方案2】：

您无法将 .blur 与 div 一起使用，它必须与一些输入字段一起使用。

您可以随时使用鼠标事件，例如

$(document).ready(function(){
  $("#addstuff").mouseleave(function(){
    $(this).remove();
  });
});

也可以使用HTML5的全局属性contenteditable（别忘了设置真假）

<div id="#addstuf" contenteditable="true">bla bla</div>

我不推荐这么多，因为移动浏览器的兼容性。

【讨论】：

【解决方案3】：

div 没有焦点和模糊事件，但您可以添加一个 contenteditable 属性，以便您可以在该 div 中键入内容，因此模糊实际上会被触发：

<div id="addstuff" contenteditable></div>

然后你的 jquery 代码works.

您可以添加其他功能以防止人们实际输入该 div。

您也可以使用.mouseleave() 或.mouseout() 事件。

【讨论】：

【解决方案4】：

div 元素无法聚焦，因此无法对其应用 jquery 的模糊功能。请参阅下方来自 Stack Exchange 伙伴的现有答案，了解可以应用的元素。

【讨论】：