event.preventDefault() / stopPropagation()

element.addEventListener("eventName", function(e) {
	// Cancel the default behavior.
	e.preventDefault();

	// Stop event propagation.
	e.stopPropagation();
});

sample_preventDefault.html

<a id="link" href="https://example.com">Link</a>
<form id="form">
	<input type="text" id="name" placeholder="Name">
	<button type="submit">Submit</button>
</form>
<div id="outer">
	<div id="inner">Inner</div>
</div>
<p id="output"></p>

sample_preventDefault.js

var output = document.getElementById("output");

// Use preventDefault() to cancel link navigation.
var link = document.getElementById("link");
link.addEventListener("click", function(e) {
	e.preventDefault();
	output.textContent = "Page navigation was canceled.";
});

// Use preventDefault() to cancel form submission and handle it with JavaScript.
var form = document.getElementById("form");
form.addEventListener("submit", function(e) {
	e.preventDefault();
	var name = document.getElementById("name").value;
	output.textContent = "Entered name: " + name;
});

// Use stopPropagation() to stop propagation to the parent element.
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.addEventListener("click", function() {
	output.textContent = "outer was clicked.";
});
inner.addEventListener("click", function(e) {
	e.stopPropagation(); // Stop propagation to the parent element.
	output.textContent = "inner was clicked.";
});

View sample page

event.preventDefault() is a method that suppresses the browser's built-in default behavior. For example, it can cancel actions that the browser performs automatically, such as navigating to a new page when a link is clicked, reloading the page when a form's submit button is pressed, or toggling the state of a checkbox. A common use case is to validate a form with JavaScript and then submit it manually only if validation passes.

event.stopPropagation() is a method that stops event bubbling. Normally, an event that occurs on a child element propagates up to parent elements in order, but calling event.stopPropagation() stops this propagation at that point, preventing parent element listeners from running.

event.preventDefault() only cancels the default behavior without stopping propagation, and event.stopPropagation() only stops propagation without canceling the default behavior. If you want to do both at the same time, use the two methods together.