html - タッチスクリーンで ":active" 疑似クラスをトリガーする

Question

私は現在、キオスク モードで Chrome を実行しているタッチスクリーン キオスクに展開される JavaScript アプリケーションを開発しています。

マウスを使用してインターフェイスのボタンをクリックすると、「:active」疑似クラスによって適用されたスタイルが、マウスを離したときに表示されることに気付きました。私の問題は、画面に触れてトリガーされた同じボタンがアクティブ状態をトリガーしないことです。

タッチ イベントをマウス クリックと同じように動作させる方法はありますか?

Answer 1

CSS :active 疑似クラスが機能していないと仮定すると、おそらく DOM イベントを使用する必要があります。

「mousedown」および「mouseup」イベントはタッチスクリーンで機能しますか? 彼らがそうしていると仮定すると、次のようなことを試すことができます：

addEventListener("mousedown", function (event) {
    if (event.target.setAttribute) {
        event.target.setAttribute("data-active", "");
    }
}, true);

addEventListener("mouseup", function (event) {
    if (event.target.removeAttribute) {
        event.target.removeAttribute("data-active");
    }
}, true);

次に、CSS 内で、次のように :active を [data-active] に置き換えます。

div[data-active] {
    /* blah blah */
}

これがまったく同じように機能するとは思いません...たとえば、子要素を正しく機能させるには、いくつかのトリックが必要になる場合があります。