40

わかりました、私は気が狂ったように感じます...

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

Mobile Safariの仕様には次のように書かれています。 、イメージ マップ エリア、または 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 タップの基準や、これらの制限に対処するためのアプローチについて議論があった場所を知っている人はいますか?

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

ありがとう！

4

11 に答える 11

13

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

于 2015-04-09T20:16:52.680 に答える
3

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

于 2015-10-09T14:49:24.913 に答える
3

最初に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

于 2015-09-02T17:33:30.740 に答える
-1

基準を考え出したことはありませんが、要素がタップされるとすぐにクリックをトリガーすることで問題を解決しました:

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

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

乾杯 ：）

于 2013-10-16T02:42:19.583 に答える
-1

私はあなたを助けることができるかどうかを調べていて、このコードを見つけました。好みに合わせて変更してみて、試したことを実行できるかどうかを確認してください。理解に苦しむ場合はお知らせください。詳しく説明します。私が見つけた場所には、さらに多くのものがあります

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);
    }
});
于 2013-07-17T23:46:52.650 に答える