JavaScript实现点击外部区域关闭下拉菜单-小浪学习网

JavaScript实现点击外部区域关闭下拉菜单

本文旨在提供一种使用JavaScript实现点击页面其他区域时关闭下拉菜单的方案。通过监听全局点击事件并判断点击目标是否在下拉菜单内部，我们可以有效地控制下拉菜单的显示与隐藏，提升用户体验。本文将详细介绍实现原理、代码示例以及注意事项。

实现原理

核心思路是监听document或window的点击事件。当点击事件发生时，检查点击的目标元素是否在下拉菜单及其触发元素内部。如果不在，则移除下拉菜单的show类，从而关闭下拉菜单。

代码实现（原生JavaScript）

以下是使用原生JavaScript实现该功能的代码示例：

document.addEventListener('click', function(event) {   const dropdown = document.querySelector('.dropdown');   const menu = document.querySelector('.menu');   const dropdownTitle = document.querySelector('.dropdown--title');    if (!dropdown.contains(event.target)) {     if (menu.classList.contains('show')) {       menu.classList.remove('show');     }   } });

代码解释：

立即学习“Java免费学习笔记（深入）”；

document.addEventListener(‘click’, function(event) { … });：监听整个文档的点击事件。
const dropdown = document.querySelector(‘.dropdown’);：获取下拉菜单的父元素（包含标题和菜单）。
const menu = document.querySelector(‘.menu’);：获取下拉菜单元素。
const dropdownTitle = document.querySelector(‘.dropdown–title’);：获取下拉菜单的标题元素。
if (!dropdown.contains(event.target)) { … }：判断点击的目标元素是否在下拉菜单的父元素内部。 dropdown.contains(event.target) 返回 true，如果 event.target 是 dropdown 元素的子元素（或 dropdown 元素本身），否则返回 false。 !dropdown.contains(event.target) 如果点击事件发生在下拉菜单之外，条件成立。
if (menu.classList.contains(‘show’)) { menu.classList.remove(‘show’); }：如果下拉菜单当前是显示状态（包含show类），则移除show类，关闭下拉菜单。

html结构（示例）：

<div class="dropdown">   <div class="dropdown--title">Choose category</div>   <div class="categories menu">     <a href="#" data-category="[15,16,26,27]" class="clicked">All</a>     <a href="#" data-category="15">Other</a>     <a href="#" data-category="16">Electronics</a>     <a href="#" data-category="26">Sports</a>     <a href="#" data-category="27">Toys & Games</a>   </div> </div>

css样式（示例）：

.dropdown {   position: relative; }  .dropdown .menu {   display: none; /* 初始隐藏 */   position: absolute;   top: 100%;   left: 0;   background-color: #fff;   border: 1px solid #ccc;   padding: 10px;   z-index: 10; }  .dropdown .menu.show {   display: block; /* 添加 show 类后显示 */ }

代码实现（jquery）

如果项目中使用jQuery，可以使用更简洁的方式实现：

$(document).on('click', function(event) {   if (!$(event.target).closest('.dropdown').Length) {     $('.menu').removeClass('show');   } });

代码解释：

立即学习“Java免费学习笔记（深入）”；

$(document).on(‘click’, function(event) { … });：监听整个文档的点击事件。
$(event.target).closest(‘.dropdown’)：找到点击元素或其父元素中最近的 .dropdown 元素。
.length：检查是否找到了 .dropdown 元素。如果没有找到，则长度为 0，条件成立。
$(‘.menu’).removeClass(‘show’);：移除所有 .menu 元素的 show 类，从而关闭下拉菜单。

注意事项

事件冒泡： 确保事件不会被阻止冒泡，否则监听全局点击事件可能无法生效。
性能优化：如果页面上有大量的下拉菜单，可以考虑使用事件委托，将事件监听器绑定到更高级别的父元素上，以提高性能。
zIndex： 确保下拉菜单的z-index高于其他元素，防止被遮挡。
兼容性： 在老版本的浏览器中，contains()方法可能存在兼容性问题，可以使用element.comparedocumentPosition(event.target)来替代。
动态添加的下拉菜单： 如果下拉菜单是动态添加到页面中的，需要确保事件监听器在下拉菜单添加到页面后绑定。可以使用事件委托来处理动态添加的元素。