文章目录
- 1、界面基本布局
- 2、代码实现
- 3、参考链接
1、界面基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
}
.box {
width: 80vw;
height: 80vh;
background-color: aquamarine;
}
.box2 {
width: 50vw;
height: 50vh;
background-color: rgb(247, 7, 95);
}
.box3 {
width: 30vw;
height: 30vh;
background-color: rgb(119, 235, 4);
}
</style>
</head>
<body>
<div class="box">
第一层DIV
<div class="box2">
第二层DIV
<div class="box3">
第三层DIV
<p style="height: 100px;background-color: blueviolet;">第四层 P</p>
</div>
</div>
</div>
</body>
</html>
2、代码实现
Node.contains()
- 此方法返回一个
布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（childNodes）、子节点的直接子节点等。
<script>
// 判断用户是不是点击，第三层 DIV 以外的区域
let box3El = document.querySelector('.box3')
document.addEventListener('click', (e) => {
let curEl = e.target
if (box3El.contains(curEl)) {
console.log('点击元素在 第三层DOM 里面');
} else {
console.log('点击元素 不在 第三层DOM 里面');
}
console.log('当前实际点击的DOM', e.target);
})
</script>
当鼠标点击这个红框的时候，
e.target指向的是box2，从上面的DOM结构上可以看出，box2 不在 box3 里面，所以返回 false
实际触发的是
box3，代码写的是 box3El.contains(curEl)， 因为这个方法本身就是，如若 这个方法你传入的和 box3El 相等，那他还是返回 true
这个时候实际触发的是
p标签，因为在DOM层级上p标签属于box3所以这个时候也是返回的true
3、参考链接
- Node.contains() MDN
