javascript - 事件元素的样式父级

Question

我的 HTML 看起来像这样:

<div>
    <span> content </span>
</div>

当我点击 span 时，我得到了一个 :active 伪类，这样我就可以设置它的样式。我的问题是我想在子级 :active 时设置父级 div 的样式。

有没有办法使用 CSS(我不这么认为)或 JavaScript 来做到这一点？

回答前注意两点:

1. 这道题和这题类似，只是这里的类不是普通的.active类，而是伪类:active。
2. 提供的 HTML 只是示例 HTML，我正在寻找一种通用解决方案，该解决方案适用于页面中的所有元素及其处于事件状态时的父元素，而不仅仅是这些特定元素。因此，像带有 .parent() 调用的天真的 $('span').click() 处理程序这样的解决方案将无法理想地工作

Answer 1

你可以使用 document.activeElement:

document.addEventListener("mousedown",function(){
    document.activeElement.parentElement.style.backgroundColor="red";
});

我注意到您没有包含 jQuery 标记，所以这是一种原生 JS 方法。

编辑:有趣的是，这不起作用。为了您的目的，您可以简单地使用:

document.addEventListener("mousedown",function(e){
    e.target.parentElement.style.backgroundColor="red";
});

document.addEventListener("mouseup",function(e){
    e.target.parentElement.style.backgroundColor="";
});

观看演示 ​​here .我会问一个关于这个的问题，然后再告诉你为什么前者不起作用。