読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

モーダルウィンドウでよく使うバブリング

jQuery

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング)
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。


jQuery(function ($) {
        /*
         * preventDefault / stopPropagation を使った例
         */
        $('.btnOpen').click(function () {
                // ボタンが押されたら、モーダルウィンドウを表示
                $('.windowBg').show();
                return false;
        });

        $('.windowBg').click(function () {
                // 背景がクリックされたら、ウィンドウを閉じる
                $('.windowBg').hide();
                return false;
        });

        $('.windowBody').click(function (event) {
                // ウィンドウの中身をクリックしても、閉じないようにする
                // (親である .windowBg への伝播を止める)
                event.stopPropagation();
        });

        $('.btnClose').click(function (event) {
                // 閉じるボタンのイベントをキャンセルする
                // (親である .windowBg への伝播は行う → ウィンドウは閉じられる)
                event.preventDefault();
        });
});



【参考URL】
http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html