javascript - 模糊功能不起作用

Question

我正在尝试使用模糊功能，但是它不起作用。如果用户在外部单击，我想隐藏 div。

<div id="container">
Links
</div>

$(document.body).on('blur', '[id="container"]' ,function(){
$("#container").hide();
});

什么是正确的方法？

Answer 1

问题是:

1. document.body应该是 document .
2. [id="container"]应该是 #container .更好的选择器。
3. <div />没有 blur事件。所以使用 click事件而不是 blur .

tabindex方式:

赋予属性 tabindex使元素具有 blur和 focus事件。现在给blur就可以了。

片段

$(document).on('blur', '#container' ,function(){
  $("#container").hide();
});

#container {height: 100px; background: #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" tabindex="1">Click Me and Outside Me</div>