3

私は周りを見回しましたが、一般的な問題と思われるものに対する答えが見つかりませんでした.

ホバー時にアクティブになる基本的なドロップダウン メニューがあります (jQuery の hoverintent プラグインを使用)。デスクトップ ブラウザでは問題なく動作しますが、iPad のようにホバー イベントをクリックに変換しないモバイル デバイスでは動作しません。現在のJavascriptは次のとおりです。

$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(      
function() {
    $(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
    $(this).children('div').fadeToggle(fadeOutSpeed);
});

私の質問は、ドロップダウン メニューにモバイル デバイスのクリックとデスクトップのホバーを使用する最もクリーンで問題の少ない方法は何ですか? 私はいくつかのアイデアを持っていましたが、どれがわからなかった:

  1. イベントを添付onclickし、クリックがあるたびにホバーを無効にします。

  2. ホバーする機能を検出し (これがどのように行われるかはわかりません)、利用可能な場合はクリック ハンドラーを使用します。

4

2 に答える 2

3

hoverイベントハンドラーがある場合、少なくとも iOS はイベントに自動的に干渉するため、イベントに対して 1 回タップhoverし、任意のclickイベントに対して 2 回タップする必要があります。

ホブの検出は自明です。クライアントが をサポートしているかどうかを確認しますtouch。あるならtouch、ないhover。

if ("ontouchstart" in document) {
    // touch only code
} else {
    // "desktop" code
}
于 2012-08-09T21:30:39.797 に答える
2

デフォルトでは、iOS と一部の Android はホバー イベントのタップを実装しています。これは便利ですが、トップレベルのリンクが有効なアンカーにつながっていることを確認する必要があります。クリックできない親プレーサーの時代は終わりました。そのリンクが、すべての子がリンクとしてリストされているページにのみつながる場合は、それで問題ありません。しかし、どこかに行かせてください。

于 2012-08-09T22:01:14.653 に答える