web-dev-qa-db-ja.com

：アクティブな擬似クラスがモバイルサファリで機能しない

IPhone/iPad/iPodのWebkitでは、<a>タグの：active疑似クラスにスタイルを指定しても、要素をタップしてもトリガーされません。これをトリガーするにはどうすればよいですか？サンプルコード：

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
iphonecsswebkitmobile-safaripseudo-class
96
Jesse Rusak
<body ontouchstart="">
    ...
</body>

すべてのボタン要素がページ上のすべてのボタンを修正するように思われたのに対して、一度だけ適用されました。または、「 Fastclick 」と呼ばれるこの小さなJSライブラリを使用できます。タッチデバイスでのクリックイベントを高速化し、この問題も処理します。

223
wilsonpage

他の回答が述べているように、iOS Safariは、要素にタッチイベントが関連付けられていない限り、:active擬似クラスをトリガーしませんが、これまでのところ、この動作は「魔法」です。 Safari Developer Library で説明されているこの小さな宣伝文句に出会いました（エンファシス鉱山）：

-webkit-tap-highlight-color CSSプロパティをタッチイベントの設定と組み合わせて使用​​して、デスクトップと同様に動作するようにボタンを構成することもできます。 iOSでは、マウスイベントは非常に速く送信されるため、ダウン状態またはアクティブ状態は受信されません。したがって、:active擬似状態のみがトリガーされますHTML要素にタッチイベントが設定されている場合-たとえば、ontouchstartが次のように要素に設定されている場合：

<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>

IOSでボタンをタップしてホールドすると、ボタンは指定された色に変わり、周囲の透明な灰色は表示されません。

言い換えると、ontouchstartイベントを設定すると（それが空であっても）、タッチイベントに反応するようにブラウザーに明示的に指示されます。

私の意見では、これは欠陥のある動作であり、おそらく「モバイル」ウェブが基本的に存在していなかった時代に遡り（リンクされたページのスクリーンショットを見て意味を確認してください）、すべてがマウス指向でした。 Androidのような他の新しいモバイルブラウザーは、iOSに必要なもののようなハッキングなしで、タッチ時に `：active '疑似状態をうまく表示することに注意してください。

（補足：iOSで独自のカスタムスタイルを使用する場合は、:active CSSを使用して、-webkit-tap-highlight-color擬似状態の代わりにiOSが使用するデフォルトのグレーの半透明ボックスを無効にすることもできます。上記の同じリンクページで説明されているプロパティ。）

いくつかの実験の後、<body>要素にontouchstartイベントを設定するという予想されるソリューションは、allタッチイベントとバブリングが完全に機能しません。ページの読み込み時にビューポートに要素が表示されている場合、それは正常に機能しますが、スクロールダウンしてビューポートから出ていた要素をタップすると、not:active必要な擬似状態。だから、代わりに

<!DOCTYPE html>
<html><body ontouchstart></body></html>

本体にバブリングするイベントに依存する代わりに、すべての要素にイベントを添付します（jQueryを使用）：

$('body *').on('touchstart', function (){});

ただし、これがパフォーマンスに与える影響を認識していないため、注意してください。

EDIT：このソリューションには重大な欠陥が1つあります。ページのスクロール中に要素に触れても、:active擬似状態がアクティブになります。感度が強すぎます。 Androidは、ページがスクロールされるとキャンセルされる状態が表示される前に非常に小さな遅延を導入することでこれを解決します。これに照らして、選択要素でのみこれを使用することをお勧めします。 、私は基本的にページをナビゲートしてアクションを送信するためのボタンのリストであるフィールドで使用するためのWebアプリを開発しています。ページ全体がほとんどの場合ボタンであるため、これは私のために機能しません。ただし、代わりに:hover疑似状態を設定して、デフォルトの灰色のボックスを無効にした後、これは完全に機能します。

45
user128216

<a>タグにontouchstartのイベントハンドラーを追加します。これにより、CSSは魔法のように機能します。

<a ontouchstart="">Click me</a>
39
Jesse Rusak

これ 私のために働く：

document.addEventListener("touchstart", function() {},false);

注：このトリックを行う場合は、次のCSSルールを使用してMobile Safariが適用するデフォルトのタップハイライトカラーを削除することも価値があります。

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
7
dhqvinh

2016年12月8日の時点で、受け入れられた回答（<body ontouchstart="">...</body>）Safari 10（iPhone 5s）では動作しません：このハックは、ページの読み込み時に表示された要素に対してのみ動作します。

ただし、次を追加：

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>

headへの期待どおりに動作しますが、スクロール中のすべてのタッチイベントが:activeタッチされた要素の擬似状態。 （これが問題である場合は、 FighterJet's:hover回避策。）

4
Ali

すべての擬似クラスを使用していますか、それとも1つだけを使用していますか？少なくとも2つを使用している場合は、それらが正しい順序になっているか、すべてが壊れていることを確認してください。

a:link
a:visited
a:hover
a:active

..その順序で。また、：activeのみを使用している場合は、スタイリングしていなくてもa：linkを追加します。

3
tahdhaze09
//hover for ios
-webkit-tap-highlight-color: #ccc;

これは私のために働いて、強調したい要素のCSSに追加します

3
Redeye

この問題を解決するツールを公開しました。

表面的には問題は単純に見えますが、実際には、タイムアウト機能や「リンクのリストをスクロールするとどうなるか」や「リンクを押してからアクティブエリアからマウス/指を離します」

これは一度にすべて解決するはずです： https://www.npmjs.com/package/active-touch

：activeスタイルを.activeクラスに割り当てるか、独自のクラス名を選択する必要があります。デフォルトでは、スクリプトはすべてのリンク要素で機能しますが、独自のセレクター配列でスクリプトを上書きできます。

正直で、有益なフィードバックと貢献に感謝します！

1
dmitrizzle

解決策は、:targetではなく:activeに依存することです。

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>

このスタイルは、アンカーが現在のURLのターゲットになったときにトリガーされます。これはモバイルでも堅牢です。欠点は、URLのアンカーをクリアするために他のリンクが必要なことです。完全な例：

a:target { 
    background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
0
wasthishelpful

Ontouchstartを使用したくない場合は、このコードを使用できます

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>
0
Noob Dev