js实现的点击div区域外隐藏div区域

要实现点击div区域外隐藏div区域，可以通过以下的JavaScript代码来完成：

// 获取div元素和整个页面
var div = document.getElementById('myDiv');
var page = document.getElementById('page');

// 监听点击事件
page.addEventListener('click', function(event) {
  // 判断被点击的元素是否是div区域内的元素
  if (!div.contains(event.target)) {
    // 点击的是div区域外的元素，隐藏div区域
    div.style.display = 'none';
  }
});

上面的代码首先通过`getElementById`方法获取了要操作的div元素和整个页面的元素。然后使用`addEventListener`方法监听了页面的点击事件。在点击事件的回调函数中，使用`contains`方法判断被点击的元素是否是div区域内的元素，如果不是，则隐藏div区域。

最后，通过设置div的`style.display`属性为`none`，即可隐藏div区域。

需要注意的是，上述代码中的`'myDiv'`和`'page'`分别是div元素和页面的id，需要根据实际情况进行替换。

相关问题

jquery实现点击div层外，隐藏div

可以使用jQuery的事件绑定和事件冒泡机制来实现点击div层外隐藏div的效果。具体实现步骤如下：

1. 给整个页面绑定一个点击事件，当点击页面时触发事件。

2. 在事件处理程序中判断点击的区域是否是目标div层或其内部元素，如果不是，则隐藏目标div层。

代码实现如下：

$(document).click(function(event) {
  var target = $(event.target); // 获取点击的元素
  if (!target.is('#targetDiv') && !target.parents().is('#targetDiv')) {
    $('#targetDiv').hide(); // 如果点击区域不是目标div层或其内部元素，则隐藏目标div层
  }
});

其中，`event.target`表示触发事件的元素，`target.is('#targetDiv')`表示点击的元素是否是目标div层，`target.parents().is('#targetDiv')`表示点击的元素是否在目标div层内部。如果两者都不满足，则隐藏目标div层。