jQueryを書いていて「クリック時にスマホ表示はイベントを発生させたいけどpcはイベントを解除したい」という時がありました。
要するにスマホ→pcに幅を切り替えたときに、スマホで有効になっているe.preventDefault()を解除したいということですね。
ということで今回はこれのやり方を解説します。
よくある間違い
自分はこんな感じのコードを書いていて「e.preventDefault()が解除できない…」と悩んでました。
// スマホ時のみe.preventDefault()したい
$(function() {
$(window).on('load resize', function() {
// スマホ時のみ処理
if($(window).width() < 768) {
$('.btn').click(function(e) {
e.preventDefault();
// 処理
});
}
});
});
「$(window).width()でスマホ幅の時だけ処理すればpc幅では処理が走らないからイケるのでは？」と考えましたが、これはうまくいきません。
スマホ幅でクリックした後、pc幅にリサイズしてクリックするとe.preventDefault()の効果が継続しており、イベントが解除できていません。
jQueryでe.preventDefault()を解除する方法
イベントを解除する方法ですが、結論はoff()メソッドを使えばokです。
$(function() {
$(window).on('load resize', function() {
// スマホ時のみ処理
if($(window).width() < 768) {
$('.btn').click(function(e) {
e.preventDefault();
// 処理
});
} else {
// pcではイベントを解除
$('.btn').off();
}
});
});
off()はイベントハンドラーを削除するメソッドです。e.preventDefault()を解除したい場合はoff()を使って明示的に解除してあげる必要があります。
これでスマホ幅でe.preventDefault()を発生させてからpc幅にリサイズしてクリックした場合、e.preventDefault()というイベントを解除できるようになりました。
続けてpc幅からスマホ幅に再びリサイズしてもちゃんと処理できます。
まとめ
e.preventDefault()は1回処理が走ると効果が継続するみたいです。
最初はわかりにくいのでこういうところにハマらないよう気をつけていきたいですね。
参考＞＞.off() | jQuery 1.9 日本語リファレンス | js STUDIO
