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

编辑：

为获得更好的demonstration而得到TJ的信任。问题仍然存在：在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/#

请注意最后的网址，这是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选择器规范的Section 6.6.1.2：

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

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

*:active {
    background-color: red;
}

...使用此JavaScript：

(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);
    }
})();

Live Copy

我尝试了三种浏览器（Chrome，Firefox，Opera），当鼠标关闭时，该元素会显示红色背景，而当我释放鼠标时，该元素会再次变为白色;但是mousedown处理程序在Firefox或Opera中看不到:active元素，只有Chrome。

但我不是CSS规范律师。： - ）

Answer 2

似乎要在渲染框架之后或在当前执行队列之后进行设置，至少在Firefox中是如此。

立即使用setTimeout获得结果（也适用于requestAnimationFrame）：

document.addEventListener('mousedown', e => {

  setTimeout(_ => console.log(document.querySelectorAll(':active')));

});

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

2 个答案: