如何通过光标状态间接检测CSS伪元素的JS点击事件？

CSS伪元素（如::before/::after）无法直接绑定点击事件，你提出的通过光标状态判断的思路可行，以下是具体实现步骤：

1. 给伪元素设置指针光标 #

首先在CSS中为目标伪元素设置cursor: pointer，确保悬停时显示指针光标，和父元素的光标样式明确区分：

/* 父元素样式 */
.target-container {
  width: 240px;
  padding: 20px;
  border: 1px solid #eee;
  /* 父元素默认光标设为default，避免干扰判断 */
  cursor: default;
}

/* 伪元素样式 */
.target-container::after {
  content: "点击这里";
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  background: #3eaf7c;
  color: #fff;
  border-radius: 4px;
  cursor: pointer; /* 关键：伪元素悬停时显示指针光标 */
}

2. 绑定父元素点击事件并判断光标状态 #

给伪元素的父元素绑定点击事件，利用elementFromPoint获取点击位置对应的元素，再通过getComputedStyle读取光标样式，判断是否为pointer，以此间接确认点击是否发生在伪元素上：

const targetContainer = document.querySelector('.target-container');

targetContainer.addEventListener('click', (e) => {
  // 获取点击坐标对应的元素
  const clickedElement = document.elementFromPoint(e.clientX, e.clientY);
  // 获取该元素的计算光标样式
  const cursorStyle = window.getComputedStyle(clickedElement).cursor;

  if (cursorStyle === 'pointer') {
    // 伪元素被点击时的逻辑
    console.log('伪元素触发点击');
    alert('伪元素被点击了！');
  } else {
    // 父元素本身被点击时的逻辑
    console.log('父元素触发点击');
    alert('父元素被点击了！');
  }
});

注意事项 #

• 必须保证父元素和伪元素的光标样式不同，否则无法区分点击区域
• 若伪元素覆盖父元素部分区域，elementFromPoint会正确识别伪元素设置的光标样式（伪元素样式会覆盖父元素对应区域的光标）
• 该方法兼容性良好，支持所有现代浏览器及IE9+

内容的提问来源于stack exchange，提问作者Darío Ojeda Jurado