如何将css：active伪类传递给javascript？

参考： 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)
  }) 
})

https://jsfiddle.net/u3uhq9m1/1/

解决方法

您可以使用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>