Sometimes, we want to display a confirmation dialog when clicking a link with JavaScript.
In this article, we’ll look at how to display a confirmation dialog when clicking a link with JavaScript.
How to display a confirmation dialog when clicking a link with JavaScript?
To display a confirmation dialog when clicking a link with JavaScript, we can add a click listener to the body.
For instance, we write
const reallySure = (event) => {
const message = "Are you sure about that?";
const action = confirm(message) ? true : event.preventDefault();
};
const actionToFunction = (event) => {
switch (event.target.tagName.toLowerCase()) {
case "a":
reallySure(event);
break;
default:
break;
}
};
document.body.addEventListener("click", actionToFunction);
to call document.body.addEventListener
to add the actionToFunction
click listener to it.
In it, we check if the element clicked is an a
element with event.target.tagName.toLowerCase()
.
If it’s 'a'
, then we call reallySure
with event
.
In reallySure
, we call confirm
to show a confirm message.
And we call event.preventDefault
if it returns false
.
Conclusion
To display a confirmation dialog when clicking a link with JavaScript, we can add a click listener to the body.