Mobile Safari の 要素で :active 擬似クラスが機能しないのはなぜですか? どうすれば修正できますか?

Susan Sarandon
リリース: 2024-11-30 02:54:14
オリジナル
837 人が閲覧しました

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a> 要素とそれを修正するにはどうすればよいですか?
要素とそれを修正するにはどうすればよいですか? " />

:Mobile Safari での active 擬似クラスの非アクティブ

問題:

iOS ブラウザで、:active 擬似クラスのスタイルを指定すると、この問題は、WebKit ベースのブラウザで発生します。 iPhone、iPad、iPod。

コード例:

<style>
  a:active {
    background-color: red;
  }
</style>

<!-- snip -->
<a href="#">Click me</a>
ログイン後にコピー

解決策:

この問題を解決するにはMobile Safari では、ontouchstart イベント リスナーを に適用します。要素:

<body ontouchstart="">
  ...
</body>
ログイン後にコピー

このグローバル イベント リスナーは、ページ上のすべてのボタンの応答性を向上させます。

代替解決策:

別のアプローチは次のとおりです。 Fastclick JavaScript ライブラリを利用するには:

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
  FastClick.attach(document.body);
</script>
ログイン後にコピー

Fastclick によりクリック イベントが高速化されます。タッチデバイス上で、:active 擬似クラスの問題に対処します。

以上がMobile Safari の 要素で :active 擬似クラスが機能しないのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート