原生js监听当前元素之外的点击事件

监听当前元素之外的点击事件

一、具体场景
二、具体实现
三、完整代码

一、具体场景

当我们需要实现点击其他位置关闭弹窗的时候，就需要监听当前元素之外的点击事件。

二、具体实现

实现思路：监听整个dom的点击事件，判断当前元素是否包含点击事件的触发元素即可。
核心代码：

 const current = document.getElementById('current') // 当前元素document.addEventListener('click', (e) => {console.log(current.contains(e.target)) // 判断当前元素是否包含触发点击事件的元素，如果当前元素有多个，用 || 来判断即可})

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 100px;height: 80px;border: 1px solid #000;}.current {width: 100%;height: 60px;background: #9A6AFF;}.child {width: 100%;height: 40px;background: #46E3B7;}</style>
</head>
<body>
<div class="box"><div id="current" class="current" onclick="currentClick()">current<div class="child" onclick="childClick()">child</div></div>
</div>
<script>const current = document.getElementById('current')function currentClick() {console.log('current-click')}function childClick() {console.log('child-click')}document.addEventListener('click', (e) => {console.log(current.contains(e.target))})
</script>
</body>
</html>