当用户在div标签外部单击时隐藏div标签

Question

我有一个div标签，我在自定义网格上填充搜索结果，该网格放在此divtag中。

当用户点击搜索按钮时，我在上面提到的div标签中显示结果。

当用户点击div标签外，我需要关闭上面的div标签。

类似于google search auto comlete。

提前致谢。

Answer 1

基本理念

1. 连接body标签上的onclick事件以隐藏div。
2. 在div标签上连接onclick事件并停止事件冒泡。

参见 Event order

停止事件冒泡

在Microsoft模型中，您必须将事件的cancelBubble属性设置为true。

window.event.cancelBubble = true

在W3C模型中，您必须调用事件的stopPropagation（）方法。

e.stopPropagation()

Answer 2

在jQuery中，类似这样：

$('body').click(function(ev){
  if (!$(this).hasClass('your_result_container_classname') {
    // code to hide result div
    $('body').unbind('click'); // remove event handler. add again when results shown.
  }
});