【javascript】stopPropagationとpreventDefaultの使い方

今回はstopPropagation（ストッププロパゲーション）とpreventDefault（プリヴェントゥデフォルト）の使い方に書き方について紹介していきたいと思います。

親要素への伝播をキャンセルする方法

親要素と子要素にクリックイベントがある場合に子要素だけ処理を行って親要素のクリックイベントを発火したくない場合はstopPropagation（ストッププロパゲーション）メソッドを使います。

stopPropagationメソッド

stopPropagationはイベントの伝播を停止させるメソッドになります。

書き方は下記になります。

e.stopPropagation();

html

<div class="parent">    
        <a class="link" href="#">link</a>       
</div>

js

jQuery(function(){      
        jQuery(document).on('click', '.parent', function(){
                console.log('a');
        });     
});
        
const button = document.querySelector('a.link');
button.addEventListener('click', (e) => {
        e.stopPropagation(); //親要素へのイベント伝播をキャンセル
        console.log('b');
});

上記はコンソール「b」部分は処理されますがstopPropagationで親要素へのイベント伝播をキャンセルしているので「.parent」部分のクリックイベントは処理されなくなります。

既定のアクションを行わせない方法

規定のアクションを行わせない処理としてpreventDefaultを使います。

preventDefaultメソッド

通常はチェックボックスをクリックするとチェックボックスがチェックがつきますがpreventDefaultを使うことで通常どおりのアクション行うべきではないことを伝えてくれます。

preventDefaultのあとにstopPropagationを呼び出し伝播が終了されない限り伝播し続けます。

html

<div class="form">      
        <input type="checkbox" id="check1" />
        <label for="check1">checkbox</label>
</div>

javascript

const checkbox = document.querySelector('.form #check1');
checkbox.addEventListener('click', (e) => {
        event.preventDefault(),
        event.stopPropagation();
});

以上がstopPropagationとpreventDefaultの使い方になります。