参考：AnkithAmtange 发布的评论
<div>Click Away</div>
CSS
div {
width: 200px;
height: 200px;
background: orange;
}
div:active {
color: white;
background: rebeccapurple;
}
jsfiddle https://jsfiddle.net/u3uhq9m1/
如何将当前:active伪类DOM元素传递给javascript？
第一次尝试。请注意，jQuery不是必需的。
$(document).ready(function() {
var active;
$("div").click(function() {
active = $(":active");
setTimeout(function() {
console.log("active", active)
}, 1000)
})
})
document.activeElement来实现。
$(function() {
$(document).on('click', function() {
console.log(document.activeElement);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">asdf</div>
<span>123</span>
<select>
<option>1</option>
</select>
<button>123</button>
<input />如果您想要获取当前的:active元素，必须使用mousedown事件（而不是click事件），因为一旦松开鼠标，:active元素将不再处于活动状态。
由于:active会冒泡到DOM树上，所有父元素也会得到:active伪类（在下面的示例中添加了红色边框），因此我只选择了$(':active')选择器中的最后一个元素。
请参考以下示例：
$(document).ready(function() {
var active;
$(document).mousedown(function() {
active = $(":active");
setTimeout(function() {
console.log("active", active.last()[0])
}, 1000)
})
})div {
width: 100px;
height: 100px;
background: orange
}
div:active {
color: white;
background: rebeccapurple
}
:active {
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click Away</div>您可以利用:active:hover伪类，将duration设置为0s的animation，以及在css中使用@keyframes；还可以在javascript中使用animationend事件。
:root {
--activeprop: 0px;
}
div {
position: relative;
left: var(--activeprop);
width: 200px;
height: 200px;
background: orange;
}
div:active:hover {
color: white;
background: rebeccapurple;
animation: active 0s;
-moz-animation: active 0s;
-webkit-animation: active 0s;
}
@keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}
@-moz-keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}
@-webkit-keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}<div>Click Away</div>
<script>
for (el of document.querySelectorAll("div")) {
el.addEventListener("animationend", function(event) {
console.log(`${event.target.nodeName} is :active`)
})
};
</script>
#a，span元素时，控制台会记录<body>而不是#a，span元素。Document.activeElement _“返回当前聚焦的元素，即如果用户键入任何内容，则将获得按键事件的元素”_，_“当没有选择时，活动元素是页面的<body>或 null”_。 - guest271314$(document).on('click'中使用event.toElement。 - Dekelevent.toElement。在Firefox 45中，event.toElement记录为undefined，event.originalEvent.explicitOriginalTarget记录为点击的节点。问题的要求是将CSS:active伪类传递给JavaScript。您是否建议DOMclick事件等同于CSS:active伪类？ - guest271314