iPhoneでチェックボックスやラジオボタンをタッチしたときの反応が遅いので、タッチした瞬間に反応してくれるようjQueryを使って書いてみました。
iPhoneではクリックイベントが発火するのが指を離したときだそうです。
なので、タッチイベントを使ってタッチした瞬間に反応してくれるようにしてみました。
var isTouch = false;
$(document)
.on('touchstart', 'input[type="checkbox"]', function() {isTouch = true})
// スクロールで反応しないようにする
.on('touchmove', 'input[type="checkbox"]', function() {isTouch = false})
.on('touchend', 'input[type="checkbox"]', function(e){
// クリックイベントを強制発火
if (isTouch) {
$(this).trigger('click');
e.preventDefault();
}
});
この書き方だとスクロールのときは反応しなくなります。
また、$(document).onで始めているのはjsで後から追加された要素にも対応できるようにするためです。
イベントの強制発火している部分、そもそも「function(e)て何や？」という方は
こちら。
preventDefault()はイベントオブジェクトのメソッドで、イベントのデフォルトの動作を停止します。これがないと、チェックボックスが２回タッチされたような動作になってしまいます。