检测元素外部点击？分享一段优质 JS 代码片段！

大家好，我是大澈！

本文约 600+ 字，整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享 1 段 JavaScript 代码片段，实现了检测用户是否点击了指定元素外部的区域。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

document.addEventListener('click', function (evt) {
    const isClickedOutside = !ele.contains(evt.target);
});

分享原因

这段代码展示了如何检测用户是否点击了指定元素外部的区域。

这种技巧在许多前端开发场景中非常有用，例如，当你希望用户点击某个弹出窗口外部时关闭窗口，或者点击某个菜单外部时收起菜单。

掌握这种事件处理方式有助于增强用户交互体验。

代码解析

1. document.addEventListener('click', function (evt) { ... })

这行代码为整个文档添加了一个点击事件监听器。document.addEventListener方法用于在指定事件发生时运行特定的代码。

'click'是事件类型，这里表示监听鼠标点击事件。

function (evt) { ... }是事件处理函数，当点击事件发生时，这个函数会被执行。evt（或event）是事件对象，包含关于事件的各种信息。

2. const isClickedOutside = !ele.contains(evt.target);

evt.target：指向触发事件的元素，即用户实际点击的元素。

ele：假设是你希望监控的特定元素。

ele.contains(evt.target)：contains方法用于检查ele元素是否包含evt.target元素。这个方法返回true或false。

因此，isClickedOutside在用户点击了ele元素外部时为true，在点击了ele元素内部时为false。

- end -