如何将 css :active 伪类传递给 javascript？答案

【问题标题】：How to pass css :active pseudo class to javascript?如何将 css :active 伪类传递给 javascript？
【发布时间】：2017-02-19 08:21:17
【问题描述】：

参考：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/

【问题讨论】：

标签： javascript html css

【解决方案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 事件），因为一旦鼠标抬起，: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>

【讨论】：

单击#a、span 元素会记录<body>console，而不是#a、span 元素。 Document.activeElement "返回当前焦点元素，即如果用户键入any就会得到击键事件的元素" , "当没有选择时，活动元素是页面的<body> 或 null"
如果你想要“点击”元素，你可以在$(document).on('click'中使用event.toElement
"如果你想要 "clicked" 元素，你可以使用 event.toElement" event.toElement logs undefinedat firefox 45, event.originalEvent.explicitOriginalTarget logs clicked node。 Question 的要求是将css :active 伪类传递给javascript。你是说DOMclick事件等价于css:active伪类吗？

【解决方案2】：

您可以使用:active:hover 伪类，animation 将duration 设置为0s，@keyframes css； animationendjavascript 的活动

: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>

【讨论】：