如何使用JavaScript点击:after伪元素时关闭父级div

首先明确：CSS伪元素（:before/:after）不能直接被JavaScript选中，也无法直接绑定点击事件——它们是CSS生成的虚拟元素，不属于真实DOM结构的一部分。你代码里的document.querySelector('.hgroup:after')会返回null，所以事件绑定完全无效。

下面提供两种可行的解决方案：

方案1：利用事件委托（无需修改HTML结构） #

通过给伪元素的父元素.hgroup绑定点击事件，判断点击位置是否落在伪元素区域内，从而触发关闭逻辑。

修改后的代码 #

JavaScript

// 关闭逻辑：事件委托给所有.hgroup元素
document.querySelectorAll('.hgroup').forEach(hgroup => {
  hgroup.addEventListener('click', function(e) {
    // 获取伪元素的计算样式
    const pseudoStyle = window.getComputedStyle(this, ':after');
    const pseudoWidth = parseInt(pseudoStyle.width);
    const pseudoHeight = parseInt(pseudoStyle.height);
    // 计算伪元素的位置（因flex布局靠右）
    const pseudoX = this.offsetWidth - pseudoWidth - parseInt(this.style.paddingRight || 0);
    
    // 判断点击坐标是否在伪元素范围内
    if (e.offsetX >= pseudoX && e.offsetX <= pseudoX + pseudoWidth 
        && e.offsetY >= 0 && e.offsetY <= pseudoHeight) {
      this.closest('.finder').classList.add('hidden');
    }
  });
});

// 打开逻辑（修正阻止默认跳转）
const openAbout = document.querySelector('.desktop-icon__about');
const openGallery = document.querySelector('.desktop-icon__gallery');
const finderAbout = document.querySelector('.finder--about');
const finderGallery = document.querySelector('.finder--gallery');

openAbout.addEventListener("click", function(e) {
  e.preventDefault();
  finderAbout.classList.remove('hidden');
});

openGallery.addEventListener("click", function(e) {
  e.preventDefault();
  finderGallery.classList.remove('hidden');
});

CSS（修正选择器错误）

.finder {
  background: #eee;
  height: 100px;
  margin-bottom: 12px;
  width: 200px;
}

/* 修正选择器：原代码漏写了.finder前缀 */
.finder.hidden {
  display: none;
}

.hgroup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 4px;
  height: 20px; /* 固定高度便于点击范围判断 */
}

.hgroup:after {
  background: red;
  content: "";
  display: block;
  height: 10px;
  cursor: pointer;
  width: 10px;
}

.desktop-icon {
  margin-right: 8px;
}

方案2：添加实体关闭按钮（更直观，维护性更好） #

直接在HTML中添加真实的关闭按钮，无需依赖伪元素，逻辑更清晰。

修改后的代码 #

HTML

<div class="desktop-group">
  <a href="#" class="desktop-icon desktop-icon__about">
    <span class="desktop-icon__label" contenteditable="true" spellcheck="false">Open About</span>
  </a>
  <a href="#" class="desktop-icon desktop-icon__gallery">
    <span class="desktop-icon__label" contenteditable="true" spellcheck="false">Open Gallery</span>
  </a>
</div>

<hr />

<div class="grid__item finder finder--about">
  <div class="hgroup">
    About Box
    <button class="close-btn"></button>
  </div>
</div>

<div class="grid__item finder finder--gallery">
  <div class="hgroup">
    Gallery Box
    <button class="close-btn"></button>
  </div>
</div>

CSS

.finder {
  background: #eee;
  height: 100px;
  margin-bottom: 12px;
  width: 200px;
}

.finder.hidden {
  display: none;
}

.hgroup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 4px;
}

/* 给实体按钮套用原伪元素样式 */
.close-btn {
  background: red;
  border: none;
  height: 10px;
  cursor: pointer;
  width: 10px;
  padding: 0;
}

.desktop-icon {
  margin-right: 8px;
}

JavaScript

// 关闭逻辑：直接绑定实体按钮
document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.closest('.finder').classList.add('hidden');
  });
});

// 打开逻辑（阻止默认跳转）
const openAbout = document.querySelector('.desktop-icon__about');
const openGallery = document.querySelector('.desktop-icon__gallery');
const finderAbout = document.querySelector('.finder--about');
const finderGallery = document.querySelector('.finder--gallery');

openAbout.addEventListener("click", function(e) {
  e.preventDefault();
  finderAbout.classList.remove('hidden');
});

openGallery.addEventListener("click", function(e) {
  e.preventDefault();
  finderGallery.classList.remove('hidden');
});

额外注意事项 #

• 原CSS中.hidden选择器写错，应为.finder.hidden而非finder.hidden，否则隐藏样式不会生效；
• a标签点击时需调用e.preventDefault()，避免触发默认跳转行为。

内容的提问来源于stack exchange，提问作者user1406440