GooglePlayで公開中の麻雀点数計算アプリ「suzume」でチェックボックスが動作しないという指摘があったので解決した話。
自分の端末では特に問題なく動作していたのでまったく気づいてなかった。
問題の画面はこれ。
HTML5/CSS3/Javascriptで構成されているので、このチェックボックスのマークアップはこうなっています。
<input type="checkbox" name="option-yaku" id="option-yaku01" data-fan="1" value="ダブル立直"><label for="option-yaku01" data-yaku="yaku01">ダブル立直</label>
チェック部分のデザインはCSSのみで、画像は使用していません。
CodePenにサンプルを掲載しておきました。
（これはあとで別途メモ記事にしておきます）
See the Pen css only checkbox by natsumi (@mayo31) on CodePen.18228
実際のアプリでは、反応速度をよくしてきれいにhover表示したいので、labelをタップするとタッチイベントを取得して、対応するチェックボックスのchecked属性をtrue/falseしています。
$('[data-yaku]:not([data-yaku$="0"])').on('touchstart', function(e){
$(this).addClass('hover');
if($(this).prev().is(':checked')){
$(this).prev().prop('checked', false);
}
else {
$(this).prev().prop('checked', true);
}
});
$('[data-yaku]:not([data-yaku$="0"])').on('touchmove', function(e){
e.preventDefault();
});
$('[data-yaku]:not([data-yaku$="0"])').on('touchend', function(e){
$(this).removeClass('hover');
});
でもこれだと
labelがタップされたからチェックボックス切り替える（自前の処理）
↓
終わる
↓
labelがクリックされたからチェックボックス切り替える（ブラウザの処理）
みたいな感じになっちゃう。
ってことに気づきました。
そこで、以下の処理を追加。
$('[data-yaku]:not([data-yaku$="0"])').on('click', function(e){
e.preventDefault();
});
まあ単純に、クリックイベントも取得してpreventDefault()するってこと。
これはラジオボタンの場合、2回同じものをクリックしても変化がない。
面子入力のほうの設定でも同じことが起きているけど、目に見えないし処理に影響がないから、何も起きていないように見えるわけですね。
指摘してくれた人にapkファイル送りつけてインストールしてもらったら問題なく動いたということなので、GooglePlayに最新ファイル（1.0.6）を公開しました。
個人だと検証端末が確保できないから、人付き合いが大事ですね( ﾟдﾟ)ｳﾑ
感謝感謝。