頭脳一式 
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がオススメ！同僚に差をつけよう！
