2月更新・前月(1月)の人気記事トップ10 02/01/2023
- ( 01 – ) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 02 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 04 – ) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
- ( 09 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 05 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 07 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 06 ↓) 【jQuery】入門5. jQueryで日時を表示
- ( 10 – ) 【iPhone / iPad】投稿の準備中にエラーが起きました。後でやり直してください。
【Labs】return falseの代わり
こんにちは(・∀・)
JavaScriptでaタグなどに使用してタグを無効にするreturn false、通常であれば特に問題はないのですが、最近aタグを無効にしつつもクリック(タッチ)イベントは伝えたいということがありました。
例えばよくあるページ内スクロールでページ内を移動しつつ他のこともしたい場合、return falseでaタグの挙動が無効化されているとページ内スクロールの他にもう一つ何かしたくてもそのクリック(タッチ)イベントは、return falseによって伝えてくれません。
ではどうすれば良いか...
preventDefault
そういう時はreturn falseの代わりにpreventDefaultを使えば解決します。
ボタンをクリックしてナビを展開するタイプのスマホサイトなどでよくあるタイプのメニューボタンで、クリックしてページ内移動しつつ展開したナビを閉じたい場合、return falseだとページ内移動はしても開いたナビを閉じてくれません。
そこでreturn falseの代わりにpreventDefaultを使えばaタグを無効にしつつもクリック(タッチ)イベントは伝えてくれます。
サンプル1のJavaScript
preventDefaultを使ったサンプルです。
preventDefault
$(function() {
//移動するスクリプト
$('a[href^=#]').click(function(ev) {
var href= $(this).attr('href');
var target = $(href == '#' || href == '' ? 'html' : href);
var position = target.offset().top;
$('html,body').animate({scrollTop: position}, 500, 'swing');
//return false;
ev.preventDefault();
});
});
Result
【Labs】クリック(タッチ)イベントにpreventDefaultを使用しているサンプルサンプル2のJavaScript
return falseを使ったサンプルです。
return false
$(function() {
//移動するスクリプト
$('a[href^=#]').click(function() {
var href= $(this).attr('href');
var target = $(href == '#' || href == '' ? 'html' : href);
var position = target.offset().top;
$('html,body').animate({scrollTop: position}, 500, 'swing');
return false;
});
});
Result
【Labs】クリック(タッチ)イベントにreturn falseを使用しているサンプル関連リンク
【Labs】ページトップボタンとページ内スムーススクロール
【Labs】jQueryでページトップボタン
【Labs】JavaScriptでスムーススクロール