web-dev-qa-db-ja.com

iOSでクリックをトリガーするために2回タップする必要がある理由/タイミング

私は狂ったように感じます...

IOs 6.0上のMobile Safariを見ています。要素をタップすることでクリックがトリガーされることについて、韻や理由を確立できないようです。多くの場合、ホバーをトリガーするために1回タップし、クリックをトリガーするためにもう一度タップする必要があるようです。

Mobile Safari spec says： "... 1本指と2本指のジェスチャーによって生成されるイベントのフローは、選択した要素がクリック可能かスクロール可能かによって条件付きです...クリック可能elementはリンク、フォーム要素、イメージマップ領域、またはmousemove、mousedown、mouseup、またはonclickハンドラーを備えたその他の要素です。これらの違いのため、一部の要素をクリック可能な要素に変更する必要がある場合があります...」

さらに、開発者が「...ダミーのonclickハンドラーonclick = "void（0）"を追加し、iOSのSafariがspan要素をクリック可能な要素として認識するようにする」ことを提案します。

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

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

html

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

js

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

IPadで要素をタップしてみてください。 何も起こらない

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

要素をクリックすると、最初のタップで「クリック」イベントが発生するかどうかを決定する基準は何ですか？「ホバー」を発生させるのではなく最初のタップでイベント、2回目のタップで「クリック」イベント。

私のテストでは、アンカー要素が最初のタップでクリックを発生させることができる唯一の要素であり、その後、たまにしか一貫性がありません。

ここで私は夢中になり始めます。私はインターネットを広範囲に検索しましたが、この問題についてほとんど何も見つかりませんでした。私だけでしょうか？！ 2タップの基準や、これらの制限に対処するためのアプローチについて、どこで議論が行われたかを知っている人はいますか？

質問/リクエストに対応させていただきます。

ありがとう！

iosmobileclicktouchtap
32
user2383672

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

10
Gareth Farrington

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

8
noahott

私はBootstrapを使用してこの問題を抱えていましたが、犯人がツールチップであることがわかりました。ボタンからツールチップを削除すると、もう2回タップする必要はありません。

3
sandre89

また、「：hover」擬似クラスが「click」イベントの発生を妨げる可能性があることを言及することも価値があります。

モバイルブラウザでは、ホバー操作を置き換えるためにクリックが使用される場合があり（ドロップダウンメニューを表示するなど）、最初のクリックで人為的な「ホバー」状態をトリガーし、2番目のクリックでクリックを処理する場合があります。

詳細な説明と例については、 https://css-tricks.com/annoying-mobile-double-tap-link-issue/ をご覧ください。

3
everyonesdesign

この問題を解決するには、まずiphoneかどうかを検出し、次にmouseupイベントを、呼び出しようとしている関数にバインドしました。

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

他のイベントを試してみましたが、mouseupが最適に動作するようです。ユーザーがスクロールしようとしても、touchendなどの他のイベントが発生していました。タッチした後に指をドラッグしても、Mouseupが起動しないようです。

IPhoneの検出はDavid Walsh（およびESPN）の功績によるものです。 http://davidwalsh.name/detect-iphone

1
Frank

私の解決策は、CSSから：hover状態を削除することでした。そして、あなたがそれについて考えるとき、モバイルブラウザはホバーがないため、：hover状態を持つべきではありません。

デスクトップでホバー状態を維持する場合は、次のようにメディアクエリを使用できます。

.button {
    background: '#000'
}

@media (min-width: 992px) {
    .button:hover {
        background: '#fff'
    }
}
0
Or Bachar

私はあなたを助けてこのコードを見つけられるかどうかをグーグルで探していました。あなたの好みに合わせて変更してみて、あなたがしようとしていることができるかどうかを確認してください。理解に問題がある場合はお知らせください。詳しく説明します。また、ここで見つけた場所もあります

Jqueryホバー機能とタブレットのクリックスルー

$('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);
    }
});
0
NodeDad

@media (hover) { /* Your styles */ }が必要です

私が知る限り、さまざまな形のこの問題はまだ存在しています。

2019年には、ほとんどの場合、上記のすべてのケースが CSSのみのソリューション ...を使用して改善できるようになりましたが、スタイルシートのリファクタリングが必要になります。

_label {
  opacity:0.6  
}

label input[type=radio]:checked+span {
  opacity:1
}

.myClass::before { } /* Leave me empty to catch all browsers */

a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }



/* Your styles */
@media (hover) {
  a:hover { color: red }

  .myClass::before { background: black }

  label:hover {
    opacity:0.8
  }
}
_

Fastclick、_:pseudo_、_<span>_、なぜ「デスクトップ」解像度と_first tap is hover and second tap is click_のみが@media (hover)を使用してすべて修正されるのか、ここで詳細を読むことができます。 ： https://css-tricks.com/annoying-mobile-double-tap-link-issue/

_:hover_は、スタイラス入力、タッチデスクトップ、およびモバイルが概念の異なる解釈を持っているため、かつてなかった明瞭さを提供しません。

0
urbanaut

Display：none;上記のソリューションはiOS（9.3.5以降ではテストされていません）では動作しますが、Androidでは動作しません。

ハッキングされたCSSのみのソリューションは、マイナスz-indexを使用して要素の下のリンクを非表示にし、リンクを：hoverまたはfirst-touchで正のz-indexに上げることです（わずかな遷移遅延を伴います）。 z-indexの代わりにcss translateを使用しても同じ結果が得られると思います。 iOSおよびAndroidで動作します。

この方法では、2回目のタップまでURLをアクティブにすることなく、最初のタップでタッチスクリーンデバイスのリンクにホバー効果を表示できます。

0
peterh