HTML中如何在动态隐藏元素前捕获其点击事件？

在HTML开发中，存在这样的场景：部分元素仅在另一元素获得焦点时才会显示（例如点击按钮触发另一元素显示）。当点击这个刚显示的元素时，原元素会失去焦点，导致该元素立刻消失。

编辑说明：这是预期行为，比如下拉菜单，点击标题显示列表，点击列表项时列表消失，但我需要在元素消失前捕获点击事件，当前无法实现，示例代码如下：

原示例代码 #

JavaScript

function make_action(element) {
    console.log(element);
    document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};

CSS

#buttons {
    width: 100px;
    padding: 10px;
    border: 1px solid black;
}
#buttons:focus p {
    display: block;
}
#buttons p {
    border: 1px solid blue;
    display: none;
}
p {
    margin: 5px;
    padding: 0px;
}

HTML

<div id="buttons" tabindex=0>
  <p onclick="make_action(this)" tabindex=0>onclick</p>
  <p onfocus="make_action(this)" tabindex=0>onfocus</p>
  <p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>

我曾尝试用opacity和visibility结合过渡效果作为临时解决方案：

• 使用opacity实现元素瞬间隐藏的视觉效果，但元素仍存在于页面中可被点击；
• 通过transition延迟visibility的变化，让元素在视觉消失后短暂保持可交互状态。

临时解决方案代码 #

JavaScript

function make_action(element) {
    console.log(element);
    document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};

CSS

#buttons {
    width: 100px;
    padding: 10px;
    border: 1px solid black;
}
#buttons:focus p {
    visibility: visible;
    opacity: 1;
}
#buttons p {
    border: 1px solid blue;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}
p {
    margin: 5px;
    padding: 0px;
}

HTML

<div id="buttons" tabindex=0>
  <p onclick="make_action(this)" tabindex=0>onclick</p>
  <p onfocus="make_action(this)" tabindex=0>onfocus</p>
  <p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>

但该方案并非最佳实践，因为元素仍存在于页面中，可能影响可访问性及其他问题。

问题核心 #

1. 如何在元素消失前捕获其点击事件？
2. 元素消失是因为父div失去焦点，而父div失焦正是因为点击了子元素，为何该点击事件未被检测到？如何检测该事件？

解答 #

为什么点击事件没被检测到？

事件触发顺序是关键：

1. 点击子元素时，mousedown先触发，但此时焦点尚未转移；
2. 紧接着focusout事件在父元素上触发，父元素失去焦点；
3. CSS中#buttons:focus p规则失效，子元素被设置为display: none；
4. 子元素已不在DOM渲染流中，后续的click事件（需要mousedown+mouseup完成）无法触发，所以绑定的onclick失效。

最佳解决方法：使用:focus-within伪类

这是CSS专门为这类场景设计的伪类，当元素本身或其任意后代元素获得焦点时，元素会匹配:focus-within，完全避免父元素因子元素获焦而失焦的问题。

修改后的核心CSS代码：

/* 替换原有的#buttons:focus p */
#buttons:focus-within p {
    display: block;
}

其他代码保持原示例不变即可。

效果说明：

• 点击父元素#buttons，子元素正常显示；
• 点击子元素时，父元素因子元素获焦而保持:focus-within状态，子元素不会消失，click/focus事件可以正常触发；
• 点击页面其他区域，父元素和子元素都失焦，子元素自动隐藏，完全符合下拉菜单的交互逻辑。

备选方案：事件委托+阻止默认行为

如果需要兼容不支持:focus-within的旧浏览器（如IE），可以用JS事件委托处理：

const buttons = document.getElementById('buttons');
const output = document.getElementById('output');

// 监听mousedown，它在focusout之前触发
buttons.addEventListener('mousedown', (e) => {
  if (e.target.tagName === 'P') {
    e.preventDefault(); // 阻止焦点转移，父元素保持聚焦
    make_action(e.target);
    // 手动延迟让父元素失焦，模拟点击后关闭的效果
    setTimeout(() => buttons.blur(), 100);
  }
});

function make_action(element) {
  console.log(element);
  output.innerHTML += `<p>detected ${element.innerHTML}</p>`;
}

CSS和HTML保持原示例不变，该方案通过阻止焦点转移确保事件能被捕获，再手动处理后续隐藏逻辑。

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