什么时候才能应用：active伪类

Question

我试图使用querySelector在页面中查找活动元素。我假设绑定到文档上的mousedown事件的处理程序将在事件从目标返回后触发，这意味着应该已经应用了:active伪类。

document.addEventListener("mousedown",function(e){

    console.log(document.querySelector("*:active"));// logs null

    // expected value was the target of the mousedown event, that is,
    console.log(e.target);

});

我的问题是：:active伪类究竟适用于什么时候？请注意，当我记录该值时，mousedown事件已在目标上触发。

有关示例，请参阅http://jsfiddle.net/tK67w/2/。这里要注意的一件有趣的事情是，如果你在处理程序中设置断点，你可以看到我为a:active定义的css规则已经应用，尽管querySelector返回null

编辑：

归功于TJ提出了更好的demonstration。问题仍然存在：在IE和Chrome以外的浏览器中，如何激活所有活动元素的HTMLCollection？

Answer 1

我相信问题在于，当你使用querySelector时，你只会获得第一个活跃元素。但你的锚在树下更远。

更新：有趣的是，我没有使用Firefox或Opera，但我使用的是Chrome。以下是Chrome结果。请参阅以下内容。

考虑（live copy）：

document.addEventListener("mousedown", handler, false);
function handler(e){
    console.log(
        "event " + e.type + ": " +
        Array.prototype.join.call(document.querySelectorAll("*:active")));
}​

当我单击锚点时，我在控制台中看到了这个：

event mousedown: [object HTMLHtmlElement],[object HTMLBodyElement],[object HTMLDivElement],http://fiddle.jshell.net/_display/#

注意最后的URL，这是toString实例的默认HTMLAnchroElement，由join触发。

由于querySelectorAll需要按文档顺序返回元素，如果您需要最具体的活动元素，则使用最后一个。示例（live copy）：

(function() {
    document.addEventListener("mousedown",handler, false);

    function handler(e){
        var active = document.querySelectorAll("*:active");
        var specific = active && active.length && active[active.length-1];
        display("Most specific active element: " +
                (specific ? specific.tagName : "(none)"));
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();
​

在我的情况下（使用Chrome），我会看到最具体元素的标记名称（如果我点击链接，则为锚点等）。

---

Chrome似乎遵循规范，而Firefox和Opera则不然。来自CSS3 Selectors规范的qazxsw poi：

Section 6.6.1.2伪类适用于用户激活元素的情况。例如，在用户按下鼠标按钮并释放它的时间之间。

在我看来，:active应该适用于上述。如果我们使用这个CSS，则会备份此断言：

:active

...使用此JavaScript：

*:active {
    background-color: red;
}

(function() {
    document.addEventListener("mousedown", mouseDown, false);
    document.addEventListener("mouseup", mouseUp, false);

    function mouseDown(){
        var active = document.querySelectorAll("*:active");
        var specific = active && active.length && active[active.length-1];
        display("Mouse down: Most specific active element: " +
                (specific ? specific.tagName : "(none)"));
    }

    function mouseUp() {
        display("Mouse up");
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

在我尝试过的所有三种浏览器（Chrome，Firefox，Opera）中，当鼠标停止时，该元素会变为红色背景，而当我释放它时，该元素会再次变为白色;但Live Copy处理程序没有在Firefox或Opera中看到mousedown元素，只有Chrome。

但我不是CSS规范律师。 :-)

Answer 2

似乎在渲染帧之后，或者在当前执行队列之后设置，这至少是Firefox的情况。

使用:active得到的结果没有延迟（也与setTimeout合作）：

requestAnimationFrame