イベントオブジェクト.preventDefault() / stopPropagation() 対応: DOM Level 2（2000）

element.addEventListener("イベント名", function(e) {
	// デフォルト動作をキャンセルします。
	e.preventDefault();

	// イベントの伝播を停止します。
	e.stopPropagation();
});

<a id="link" href="https://example.com">リンク</a>
<form id="form">
	<input type="text" id="name" placeholder="名前">
	<button type="submit">送信</button>
</form>
<div id="outer">
	<div id="inner">内側</div>
</div>
<p id="output"></p>

var output = document.querySelector("#output");

// preventDefault() でリンクのページ遷移をキャンセルします。
var link = document.querySelector("#link");
link.addEventListener("click", function(e) {
	e.preventDefault();
	output.textContent = "ページ遷移がキャンセルされました";
});

// preventDefault() でフォームの送信をキャンセルし、JavaScriptで処理します。
var form = document.querySelector("#form");
form.addEventListener("submit", function(e) {
	e.preventDefault();
	var name = document.querySelector("#name").value;
	output.textContent = "入力された名前: " + name;
});

// stopPropagation() で親要素への伝播を停止します。
var outer = document.querySelector("#outer");
var inner = document.querySelector("#inner");
outer.addEventListener("click", function() {
	output.textContent = "outer がクリックされました";
});
inner.addEventListener("click", function(e) {
	e.stopPropagation(); // 親要素への伝播を停止します。
	output.textContent = "inner がクリックされました";
});

『event.preventDefault()』はブラウザが持つデフォルトの動作を抑止するメソッドです。例えば、リンクをクリックした時のページ遷移、フォームの送信ボタンを押した時のページリロード、チェックボックスをクリックした時の状態変化など、ブラウザが自動的に行う動作をキャンセルできます。フォームのバリデーションをJavaScriptで行い、問題がなければ手動で送信するという使い方が一般的です。

『event.stopPropagation()』はイベントのバブリングを停止するメソッドです。通常、子要素で発生したイベントは親要素へと順番に伝播しますが、『event.stopPropagation()』を呼ぶとその時点で伝播が停止し、親要素のリスナーは実行されません。

『event.preventDefault()』はデフォルト動作のキャンセルのみで伝播は止めず、『event.stopPropagation()』は伝播の停止のみでデフォルト動作はキャンセルしません。両方を同時に行いたい場合は、2つのメソッドを併用してください。