【8/27まで】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】既定イベントをキャンセルするpreventDefault()の使い方

【JavaScript入門】既定イベントをキャンセルするpreventDefault()

preventDefault()を用いると既定のイベントをキャンセルできます。

a要素クリック時のページ遷移をキャンセルする例

a要素をクリックしてもページ遷移は発生しません。

See the Pen
preventDefault1
by shiakisudev (@shiakisu)
on CodePen.

HTML

<a id="ele" href="https://www.yahoo.co.jp/">yahooへ</a>
<div id="output-box"></div>

js

document.getElementById("ele").addEventListener("click",function(event) {
    document.getElementById("output-box").innerHTML += "ダメです!<br>";
    event.preventDefault();    
},false);

チェックボックスをクリックしたときの切り替えをキャンセルする

チェックボックスとラベルは紐付いているため、どちらをクリックしてもチェックボックスは切り替わりません。

See the Pen
preventDefault2
by shiakisudev (@shiakisu)
on CodePen.

HTML

<form>
    <label for="id-checkbox">Checkbox:</label>
    <input type="checkbox" id="id-checkbox"/>
</form>
<div id="output-box"></div>

js

document.getElementById("id-checkbox").addEventListener("click", function(event) {
    document.getElementById("output-box").innerHTML += "ダメです!<br>";
    event.preventDefault();
}, false);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です