Categories: JavaScript

【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);

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp