9
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhoneでチェックボックスのタッチ反応を速くする方法

Last updated at Posted at 2015-10-25

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()はイベントオブジェクトのメソッドで、イベントのデフォルトの動作を停止します。これがないと、チェックボックスが2回タッチされたような動作になってしまいます。

###以下の記事を参考にしました
簡単!要素追加時のクリックイベント登録
スマートフォンでのタッチイベントと移動を区別する方法

9
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?