【JavaScript入門】既定イベントをキャンセルするpreventDefault()
preventDefault()を用いると既定のイベントをキャンセルできます。
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がオススメ！同僚に差をつけよう！