参考：
Comments由@AnkithAmtange发布
鉴于html
<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事件),因为：mouse元素启动后,：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>
