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

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

a要素クリック時のページ遷移をキャンセルする例
チェックボックスをクリックしたときの切り替えをキャンセルする

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>

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>

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