iOSで「クリック」機能を動作させる方法

Question

ボタンとして動作するDivのセットがあります。これらのボタンには、iOS以外のすべてのブラウザで機能する簡単なjqueryのclick（）関数があります。例えば

：

<div class="button">click me</div> 

と

$('.button').click(function(){ 

    alert('hi'); 

}); 

私は、これはiOSの上では動作しません理由はわからない - 明らかにiOS版には 'クリック' はありません。

残念ながら私は自分自身でテストするためのiphoneデバイスは持っていませんが、何かをクリックして何も起こっていないクライアントから多くの苦情が届いています。

これを実現する鍵は何ですか？

Answer 1

Click「：マウスダウンとのmouseupイベントが同じ要素で発生するOR素子は、キーボードによって活性化されると意味

Jquery Bug,から仕事が周りにあり、ただ、要素のCSSとクリックイベントに"cursor: pointer"を追加します。 。期待どおりに動作しますし、あなたも助けのため、このJquery click on Iosを見ることができます

Answer 2

あなたはこれを使用することができます：

は

$('button').bind("touchstart", function(){ 
    alert('hi'); 
}); 

別の解決策は、要素のカーソルを設定することですポインタに移動し、jQueryのliveイベントとclickイベントを処理します。 CSSで設定します。

Answer 3

実際、受け入れられた回答は私には役に立たなかった。 "cursor：pointer"、onclick = ""を使って試してみましたが、要素をアンカータグに変換することさえできました。

私がそれを機能させるためにしたのは、クリックイベントが発生したタッチスタートイベントをバインドすることでした。それは私がこのような醜いUAスプーフィングにしなければならなかったすべてのプラットフォーム上で動作するようにするには：

var ua = navigator.userAgent, 
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

jQuery("body").on(event, '.clickable_element', function(e) { 
    // do something here 
}); 

Answer 4

Marek's answerに基づいて、これはそれが私の感想（それはクリーンアップビットです）です：

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

ありますまだ先の業界のために多くの仕事、それが標準になると...

EDIT：

はまた、上では動作しませんでした携帯電話。より剛性なアプローチを取った：

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' } 
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' } 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

Answer 5

また、関数を発射する機器にイベントを適応Marek's answer、に基づいて、ここでtouchstartが最初にそこにあるiOSデバイス上でクリックを発射するために強制コードは、ありますイベント：

var UA = navigator.userAgent, 
iOS = !!(UA.match(/iPad|iPhone/i)); 

if (iOS) { 
    $(document).on('touchstart', function (e) { 
     e.target.click(); 
    }); 
}