ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker
例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロールの処理 ... return false; }); }); つまり $(function() { $('a[href*=#]').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); // スムーズスクロールの処理 ... }); }); としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
