なぜ私はiOSをクリックするトリガーに2度タップしなければならないのですか

Question

私は夢中ですね...

私はiOs 6.0のMobile Safariを見ています。要素をタップするとクリックが誘発されるような韻や理由ができないようです。多くの場合、ホバーをトリガーするために一度タップし、次にクリックをトリガーする必要があるようです。

Mobile Safari specは、「... 1本指と2本指のジェスチャで生成されるイベントの流れは、選択した要素がクリック可能かスクロール可能かによって条件付きです...クリック可能な要素はリンクです。 mousemove、mouseup、またはonclickハンドラを使用して他の要素を編集することができます...これらの違いのため、要素の一部をクリック可能な要素に変更する必要があるかもしれません... "

It開発者は "...ダミーのonclickハンドラを追加すると、onclick =" void（0） "となるので、iOSのSafariはspan要素をクリック可能な要素として認識します。

しかし、私のテストではこれらのステートメントは偽であることが示されています。

JsFiddle：

<div id="plain-div" onclick="void(0)">Plain Div</div> 

JS

document.getElementById('plain-div').addEventListener('click', function() { 
    alert('click'); 
}); 

http://jsfiddle.net/6Ymcy/1/

HTMLは、iPad上の要素をタップしてください。 何も起こらない

しかし、私は逃げます。私にとって重要なことは、次の質問を見つけることです：

要素をクリックすると、最初のタップで「クリック」イベントが発生すると判断する基準は何ですか？最初のタップで「ホバー」イベントを発し、2回目のタップで「クリック」イベントを発生させるのとは対照的に、

私のテストでは、アンカー要素は、最初のタップでクリックを発生させることができる唯一の要素ですが、ときどき矛盾するものがあります。

ここで私は狂った感じがします。私はインターネットを広範囲に検索し、この問題については何も知らなかった。私だけでしょうか？！誰かが、2タップの基準や、これらの制限を扱うアプローチについての議論がどこにあるのかを知っていますか？

質問/リクエストには喜んでお答えします。

ありがとうございます！

Answer 1

私はあなたを助けることができるかどうかを調べるために、このコードを見つけました。あなたの好きにそれを修正し、あなたが試みていることをすることができるかどうかを確認してください。あなたがそれを理解するのに困っているなら、私に知らせてください。もっと詳しく説明します。私はそれが

Jquery hover function and click through on tablet

$('clickable_element').live("touchstart",function(e){ 
    if ($(this).data('clicked_once')) { 
     // element has been tapped (hovered), reset 'clicked_once' data flag and return true 
     $(this).data('clicked_once', false); 
     return true; 
    } else { 
     // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true 
     e.preventDefault(); 
     $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. 
     $(this).data('clicked_once', true); 
    } 
}); 

Answer 2

基準を考え出したことはありませんが、これは、すぐに要素がタップされるとすぐにクリックを誘発することによって、私の問題を解決した、ここでTheresのそれにもより多くを：

https://developers.google.com/mobile/articles/fast_buttons

正しく動作させるためにコードを追加/変更する必要がありました。私の方法に興味があるかどうかを知らせてください。私は説明を投稿しようとします。

乾杯：

Answer 3

私はこの同じ問題がありました。最も簡単な解決策は、iOS（またはタッチ対応ターゲットプラットフォーム）の 'mouseenter'イベントをバインドすることではありません。それが拘束されていない場合、ホバーイベントはトリガーされず、最初のタップでクリックがトリガーされます。

Answer 4

私は最初にそれがiphoneであるかどうかを検出してから、mouseupイベントを私が呼び出しようとしていた機能にバインドしてこの問題を解決しました。

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){ 
     ... 
    } 
} 

他のイベントも試しましたが、マウスアップがうまくいくように見えました。 touchendのような他のイベントは、ユーザーがスクロールしようとしても発砲していました。タッチした後に指をドラッグすると、マウスアップが起動しないように見えます。

iPhone検出のためのDavid Walsh（およびESPN）のクレジット http://davidwalsh.name/detect-iphone

Answer 5

要素が「display：none;」の場合、iOSはホバーイベントをトリガーします。通常状態では "display：block;"と表示されます。またはインラインブロックオン：ホバー。

Answer 6

Bootstrapを使用してこの問題が発生しましたが、その原因がツールチップであることがわかりました。ボタンからツールヒントを削除すると、もう2度タップする必要はありません。

Answer 7

これらはすべてiOS上では最初のタップがホバーとして機能するため、2番目のタップはクリックとして機能します。

このjQueryスクリプトを追加することで削除できます。

$('a').on('click touchend', function(e) { var el = $(this); var link = el.attr('href'); window.location = link; });

Answer 8

それに言及することも価値がある「：ホバー」疑似クラスは、発射からのイベントを「クリック」できない場合があります。

モバイルブラウザでは、クリックしてホバーアクションを置き換えることがあります（たとえば、ドロップダウンメニューを表示するなど）、最初のクリックで人為的な「ホバー」状態を引き起こし、次に2番目のクリックを処理できます。

詳しくは、https://css-tricks.com/annoying-mobile-double-tap-link-issue/を参照してください。

Answer 9

ディスプレイ：なし;上記の解決策はiOS（9.3.5以降ではテストされていません）では動作しますが、Androidでは動作しません。

ハッピーなCSSのみの解決策は、マイナスzインデックスを使用して要素の下のリンクを非表示にし、ホバーまたはファーストタッチ（小さな遷移遅延を伴う）で正のZインデックスにリンクを持ち上げることです。 。私は、z-indexではなく、css translateで同じ結果を得ることができたと思います。 iOSとAndroidで動作します。

この方法で、タッチスクリーンデバイス上のリンクに、最初のタップを使用して、2回目のタップまでURLを有効にせずにホバー効果を表示できます。