5

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/を参照してください。ここで注目すべき興味深い点は、ハンドラー内にブレークポイントを設定すると、nullを返しているa:activeにもかかわらず、既に適用するために定義した css ルールを確認できることです。querySelector

編集：

より優れたデモンストレーションを思いついた TJ の功績は認められます。ただし、問題は依然として残っています。IE と Chrome 以外のブラウザで、アクティブになったすべてのアクティブな要素の HTMLCollection を取得するにはどうすればよいでしょうか。

4

2 に答える 2

2

問題は、を使用しているため、最初のアクティブな要素querySelectorしか得られないことだと思います。しかし、アンカーはツリーのはるか下にあります。

更新: 興味深いことに、Firefox や Opera では何も得られませんが、Chrome では得られます。以下は Chrome の結果です。詳細については、以下を参照してください。

考慮してください (ライブコピー):

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であり、 .HTMLAnchroElementjoin

querySelectorAll要素をドキュメント順に返す必要があるため、最も具体的なアクティブな要素が必要な場合は、最後の要素を使用します。例 (ライブコピー):

(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 セレクター仕様のセクション 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);
    }
})();

ライブコピー

私が試した 3 つのブラウザー (Chrome、Firefox、Opera) では、マウスを離すと要素の背景が赤くなり、離すと再び白くなります。ただし、mousedownハンドラーは:activeFirefox または Opera の要素を認識せず、Chrome のみを認識します。

しかし、私は CSS 仕様の弁護士ではありません。:-)

于 2012-11-10T13:58:08.467 に答える
0

フレームがレンダリングされた後、または現在の実行キューの後に設定されるようです。少なくとも Firefox の場合はそうです。

setTimeout遅滞なく使用して結果を得ました（requestAnimationFrameあまりにも動作します）：

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

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

});
于 2019-03-02T21:53:23.653 に答える