web-dev-qa-db-ja.com

jQueryクリックイベントがiOSで機能しない

2回目の更新：関数（resetFigures）の1つがイベントハンドラーを妨げていたように見えるため、それをバインド関数の最後に移動してソートしました。

更新：いくつかの基本的なテストの後、クリックイベントが登録されていることがわかりました。タップしたときにボックスが反転しなかっただけです。

ChromeとFirefoxで動作するサイトの基本的な美的機能はありますが、iOSで正しく動作することを拒否します（iOS 6.1を搭載したiPhone 4およびiOS 4.3.5を搭載したiPadでテストします）。

このサイトと、もちろんスクリプト（main.js）をここで表示できます： http://bos.rggwebdesigns.com/

IOSはjQueryのクリックイベントを実際に適切に処理しないことを読みましたが、修正を見つけるのに苦労しています。ここでStack Overflowのいくつかのスレッドはlive（）メソッドに言及しましたが、次のように実装（およびクリック可能な要素にonclick=""を追加）が機能しないようです：

$('.card').live('click touchstart', function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

また、この興味深い回避策プロジェクトに出会いました： http://aanandprasad.com/articles/jquery-tappable/ 。しかし、私もそれに運がなかった：

$('.card').tappable(function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

また、誤解された場合は修正してください。ただし、このサイトによると、iOSでは3D変換が適切なプレフィックスでサポートされています： http://caniuse.com/transforms3d

jqueryioscss3clicktransform
64
Bobe

IOSには、DOMのロード後に追加された要素にバインドされたクリック/タッチイベントが登録されないという問題があります。

PPKには次のアドバイスがあります： http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

これは簡単な修正であることがわかりました。これをcssに追加するだけです。

cursor: pointer;
243
BingeBoy

最近、クライアント用のWebアプリで作業しているときに、非アンカー要素に追加されたクリックイベントがiPadまたはiPhoneで機能しないことに気付きました。すべてのデスクトップおよびその他のモバイルデバイスは正常に機能しましたが、Apple製品は最も人気のあるモバイルデバイスであるため、修正することが重要でした。

JQueryでクリックハンドラーに割り当てられた非アンカー要素には、onClick属性が必要です（以下のように空にすることができます）。

onClick=""

OR

要素cssには、次の宣言が必要です。

cursor:pointer

奇妙なことですが、それは物事を再び機能させるために必要なことです！
source： http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

54
saurabh kamble

タップイベントをバインドする必要があります。クリックはモバイルサファリまたはUIWbviewには存在しません。また、この polyfill を使用して、リンクがタッチされたときの300ミリ秒の遅延を回避することもできます。

2
elio.d