JavaScript失去了焦点

Question

我使用div JS事件处理程序将display:inline设置为onclick()。当我点击除现在可见div之外的页面上的任何其他位置时，如何让div返回display:none？

我用Google搜索blur并将focus设置为另一个元素，但我不知道如何实际执行此操作。

Answer 1

如果您想使用jQuery，则很容易：

$('*').click(function(){
  if ($(this).attr('id') !== 'div_id'){
     $('#div_id').css('display', 'none');
  }
});

使用所有*选择器，上述内容变得相当缓慢，因此我建议您使用jQuery Outside Events plugin。

示例：

$('#div_id').bind('clickoutside', function(){
  $(this).css('display', 'none');
});

Answer 2

你可以通过给它100％的宽度和高度创建一个覆盖整个窗口区域的绝对div，然后给它一个onclick来显示：none你的div。你的div应该有一个大于绝对div的z-index

Answer 3

原始js样本可以找到here。

Answer 4

document.onclick = function(e) {
  if (!e) var e = window.event;
  if (e.target.id == 'the_id_of_your_div') {
    // Do something
  } else {
    // Do something else
  }
}