问题
下拉框组件是如何监听点击下拉框以外的区域,下拉框自动收起呢?
思考
- 使用蒙版,但是这样会多写一个标签,当其他元素层级高过蒙版时,可能点击不会冒泡到蒙版,要处理冒泡事件等等。
- 使用元素中的
contains
contains
返回一个布尔值,表示一个节点是否是给定节点的后代,即该节点本身、其直接子节点(childNodes)、子节点的直接子节点等。
demo链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学习 js 的 contains</title>
<style>
#container {
border: 1px solid red;
}
</style>
</head>
<body>
<h1 id="container">
click here
<p>container children</p>
</h1>
<script type="text/javascript">
let containerEl = document.getElementById("container");
function decideContains(el) {
const bool = containerEl.contains(el.target);
if (bool) {
console.log("点击了 container 元素范围内");
} else {
console.log("点击了 container 元素范围外");
}
}
document.addEventListener("click", decideContains);
</script>
</body>
</html>