115

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

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

13 に答える 13

247 
<body ontouchstart="">
    ...
</body>

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

于 2012-01-16T09:26:15.257 に答える
64

他の回答が述べているよう:activeに、要素にタッチ イベントがアタッチされていない限り、iOS Safari は疑似クラスをトリガーしませんが、これまでのところ、この動作は「魔法」でした。私はそれを説明するSafari Developer Libraryでこの小さな宣伝文句に出くわしました（私のものを強調してください）：

-webkit-tap-highlight-colorCSS プロパティをタッチ イベントの設定と組み合わせて使用​​して、デスクトップと同様に動作するようにボタンを構成することもできます。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イベントを設定すると (たとえそれが空であっても)、タッチ イベントに反応するようブラウザに明示的に指示することになります。

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

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

いくつかの実験の後、すべてのタッチイベントがバブルする要素にontouchstartイベントを設定するという予想される解決策は、完全には機能しません。ページの読み込み時に要素がビューポートに表示されている場合、正常に機能しますが、下にスクロールしてビューポートの外にある要素をタップしても、本来のように疑似状態がトリガーされません。だから、代わりに<body>:active

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

イベントがボディにバブリングするのではなく、すべての要素にイベントをアタッチします (jQuery を使用):

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

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

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

于 2015-11-12T21:14:43.973 に答える
40

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

<a ontouchstart="">Click me</a>
于 2010-10-07T19:10:23.373 に答える
6

2016 年 12 月 8 日現在、受け入れられた回答 ( <body ontouchstart="">...</body>) は Safari 10 (iPhone 5s) では機能しません。そのハックは、ページの読み込み時に表示された要素に対してのみ機能します。

ただし、次を追加します。

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

スクロール中のすべてのタッチイベントも、タッチされた要素の疑似状態をトリガーするheadという欠点があります。:active(これが問題である場合は、FighterJet の :hover回避策を検討してください。)

于 2016-12-08T17:13:14.853 に答える
3

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

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

…という順番で。また、:active だけを使用している場合は、スタイルを設定していなくても、:link を追加してください。

于 2010-10-07T19:15:11.333 に答える
1

この回答とそのバリエーションを試しましたが、確実に機能するものはないようでした（このようなものに「魔法」に頼るのは嫌いです）。そのため、代わりに次のようにしました。これは、Apple だけでなく、すべてのプラットフォームで完全に機能します。

  1. 以前は.css 宣言の名前が変更され:activeました.active。

  2. 影響を受けるすべての要素のリストを作成し、イベント ハンドラーを追加してクラスpointerdown/mousedown/touchstartを適用し、イベント ハンドラーを削除しました。jQuery の使用:.activepointerup/mouseup/touchend

    let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";

let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
    $(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
    $(this).removeClass('active');
});

これは少し面倒でしたが、Apple OS のバージョン間での破損の影響を受けにくいソリューションを手に入れました。（そして、誰がこのような破壊を必要としていますか？）

于 2019-10-12T20:52:35.143 に答える
1

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

表面的には問題は単純に見えますが、実際には、タイムアウト機能や「リンクのリストをスクロールするとどうなるか」や「リンクを押してから次に何が起こるか」など、タッチ & クリックの動作をかなり広範囲にカスタマイズする必要があります。マウス/指をアクティブ領域から離してください」

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

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

正直で役立つフィードバックと貢献に感謝します。

于 2017-03-19T04:49:47.070 に答える
-3

この質問に100％関連するわけではありませんが、CSS兄弟ハックを使用してこれを達成することもできます

HTML

<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>

SCSS

input {
    &:checked + label {
      background-color: red;
    }
  }

純粋な html/css ツールチップを使用したい場合

span {
  display: none;
}
input {
    &:checked ~ span {
      display: block;
    }
  }
于 2016-10-28T05:18:20.573 に答える
-6 
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">

<title></title>

<style>
        a{color: red;}
        a:hover{color: blue;}
</style>
</head>

<body>

        <div class="main" role="main">
                <a href="#">Hover</a>
        </div>

</body>
</html>
于 2012-11-27T16:08:47.107 に答える