javascript - :active pseudo class get applied 到底是什么时候

Question

我试图使用 querySelector 来查找页面中的事件元素。我假设绑定(bind)到文档上 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 正在返回空

编辑:

感谢 TJ 提出了更好的 demonstration .但问题仍然存在:在 IE 和 Chrome 以外的浏览器中，如何在所有事件元素变为事件元素时获取它们的 HTMLCollection？

Answer 1

我认为问题在于当您使用 querySelector 时，您只会获得 第一个 事件元素。但是你的 anchor 在树的下方。

更新:有趣的是，我在 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")));
}​

当我点击 anchor 时，我在控制台中看到了这个:

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

Note the URL at the end, which is the default toString for HTMLAnchroElement instances, which is triggered by the join.

Since querySelectorAll is required to return the elements in document order, if you want the most specific active element, you'd use the last one. Example (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)，我看到了最具体元素的标签名称(点击链接时的 anchor 等)。

---

Chrome 似乎遵循规范，而 Firefox 和 Opera 则没有。来自 Section 6.6.1.2 CSS3 选择器规范:

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

在我看来 :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 规范律师。 :-)