14

メニュー（または同様のもの）をドロップダウンするためのonmouseover javascript動作を持つWebページがあると仮定しましょう

明らかに、これは iPad やスマートフォンなどのタッチ デバイスでは機能しません。

ブラウザーが onmouseover や onmouseout などのホバー イベントと、CSS の :hover 疑似タグをサポートしているかどうかを検出するにはどうすればよいですか?

注：これが気になるなら別の書き方をすればいいのは承知していますが、検出できるかどうか気になります。

編集：「ホバーイベントをサポートする」と言うとき、私は本当に「ブラウザはホバーイベントの意味のある表現を持っていますか」という意味です。ハードウェアがサポートしていてもソフトウェアがサポートしていない場合 (またはその逆)、意味のある表現はありません。いくつかの今後の技術を除いて、どのタッチ デバイスもホバー イベントの意味のある表現を持っていないと思います。

4

5 に答える 5

18

この方法は、より多くのデバイス/ブラウザーをキャッチします

try {
   document.createEvent("TouchEvent");
   alert(true);
}
catch (e) {
   alert(false);
}

続きを読む

于 2012-01-06T13:29:11.793 に答える
11 
var supportsTouch = (typeof Touch == "object");

それがタッチデバイスかどうかを検出してから、特別なことをしてください。ほとんどのタッチ デバイスはマウス イベントをエミュレートしますが、タッチ イベントをエミュレートするマウス駆動デバイスはないため、これが最も簡単な方法です。

更新: 1 日のデバイス数とJohanのコメントを考慮すると、単純にModernizrを使用することをお勧めします。

于 2011-01-10T03:43:39.330 に答える
10

2016 年になり、ここ数年、多くのデバイスがタッチとマウスのような入力の両方を備えています。「タッチできない」は、「マウスオーバーできる」と判断する良い方法ではありません。ほんの数例を挙げると：

  • Galaxy Note 携帯電話やタブレット (Android)、Microsoft Surface (Windows)、Wacom Cintiq (Mac/Windows/Android) などの「アクティブ ペン」デジタイザ デバイス、ペンがマウスのように機能し、「画面から約1cm離れたときに「エアホバー」
  • タッチスクリーンと従来のラップトップのトラックパッドなどを備えた Windows ラップトップ / ハイブリッド
  • どのPCにも接続でき、マウスで使用できるタッチスクリーンモニター

そのため、ユーザーが 1 分間ホバーできない場合、同じデバイスで、ページを更新せずに、Galaxy Note からペンを引き抜き、(発火しないと仮定して)インタラクションで突然ホバーを使用します。、そして彼らはそれがうまくいくことを期待しています。

ユーザーが a) 使用できるかどうか、および b) 現在マウスオーバーを便利に行えるデバイスを使用しているかどうかを知る必要がある場合は、次のようにします。

  • mousemove をトリガーするカーソルが移動している場合に "has hover" 状態をアクティブにするmousemoveイベントをドキュメントにバインドし(クラスを に追加するなど)、すぐにバインドを解除して、一度だけ発生するようにします。bodyuser-can-mouseoverbody
  • touchstartまた、それを一時的に非アクティブ化するイベントとmousemoveそれを再アクティブ化する をバインドしtouchendて、タッチ時にマウス イベントをトリガーするブラウザー (Android と Windows では非常に一般的) で、通常のタッチ スクロールが をトリガーしないようにしmousemoveます。
  • イベントにこれらとmousemoveイベントのバインドを解除させて、適切なハウスキーピングを行いますtouchstarttouchend

これにより、ユーザーがマウスのように動作する入力デバイスの使用を開始するたびに、「ホバー可能」状態がトリガーされます。

たとえば、ハイブリッド デバイスを使用すると、次のようになります。

  1. 最初に、ユーザーはタッチとスワイプを使用して Web を閲覧しています。
  2. 彼らはアプリケーションに到達し、それが何であるかを理解しながら、タッチを使用して上下にスワイプします。これまでのところ、「ホバーできる」状態はアクティブではありません。
  3. これは太い指が許す以上の精度が必要なケースの 1 つであると判断し、デジタイザー ペンを引き抜くか、マウスに手を伸ばします。
  4. これにより、終了しないタッチイベントが発生することなくカーソルがページ上を移動するため、「ホバー可能」条件がトリガーされます

...そして、マウスを備えた古い学校のデスクトップワークステーションを使用します。

  1. ページが読み込まれます。
  2. ユーザーが何かをしながらマウスを動かすと、すぐにマウス移動イベントがトリガーされます
  3. 「ホバー可能」状態はすぐにトリガーされます
于 2016-09-13T16:29:42.297 に答える
5

非レガシー ブラウザ向けのもう 1 つのアプローチは、メディア クエリのhoverとany-hoverを利用することです。

matchMedia('(hover: hover)').matches; // Primary device can hover

matchMedia('(hover: none)').matches; // Primary device cannot hover

matchMedia('(any-hover: hover)').matches; // At least one of the connected devices can hover

matchMedia('(any-hover: none)').matches; // None of the connected devices can hover
于 2020-06-11T16:24:02.300 に答える