preventDefault, stopPropagation,の違い

javascript

最近javascriptをきちんと勉強なおしていて、 preventDefaultとstopPropagationの違いがわからなかったのでメモ

evt.preventDefault => イベントなどを実行しないで終了させる。たとえば大文字を入力したら文字の入力をさせずにアラームを表示させる場合



function checkName(evt) {
    var charCode = evt.charCode;
    if (charCode != 0) {
        if (charCode < 97 || charCode > 122) {
            // これがなかったらalert表示された後に
            // 大文字が入る
            // 入力した文字の表示などのイベントを無効にする
            // return falseがはいったときは何もイベントをやらずに文字が入力される
            evt.preventDefault();
            alert('大文字が入りました！');
        }
    }
}

evt.stopPropagation() => 子要素でクリックした際、親要素へのイベントの伝搬をふせぐ 下記の例だとhoge22をクリックすると、親要素のhogeにまでイベントが伝搬する





    hoge
    

        hoge22

return false; => 何もしないで終了