DOM - Event PreventDefault

Devtool Chrome Event Listener


If you don't want to have the default beahavior (such as following a link), you can prevent it with the event.preventDefault() function.

It still allow the event propagation but disable the default action.



DOM Event Handler - On Properties with Javascript (Interface Definition Language - IDL )

  • The HTML link that will not work anymore
<p>Clicking on the below link will not work</p>
<a href="">Go to the best website on the planet</a>
  • The javascript code to prevent the default behavior with the event.preventDefault() function
document.querySelector('a').onclick = function(event) {
       console.log( "You are no longer following the link" );


What are the HTML On Attributes ? (known also as event handler content attributes)

Passing the event as parameter

function prevent(event){
<p>Clicking on the below link will not work</p>
<a href="" onClick="prevent(event)">Go to the best website on the planet</a>

Returning false

If the expression returns false, the event will be consumed, preventing the browser from performing any default action.

<p>Clicking on the below link will not work</p>
<a href="" onClick="return false;">Go to the best website on the planet</a>

Discover More
Devtool Chrome Event Listener
DOM - Click Event (OnClick)

1001 ways to handle a the click event. The click event occurs when the pointing device button is clicked over an element. The onclick on attribute may be used with most elements. A click is a mousedown...
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
DOM - Event Delegation

Event delegation in the DOM
Devtool Chrome Event Listener
DOM Event - Keydown

A Keydown is an input device event that tracks when a key goes down on the keyboard. keyup You can attach it to all element. This is also possible to create advanced accesskey (ie...
HTML - Keyboard Navigation (key event)

Navigation / Manipulation of an HTML document with the keys of a keyboard. The tab key is the default key that permits to move from a interactive element to another and therefore change the focus...
HTML Form - 1001 ways to submit a Form and handle the corresponding Event

This page talks and shows all the ways on how to submit a form and handle the submit event in javascript. How a form can be submitted ? HTML One way is to include a input element of type submit that...
HTML Form - Reset (Element and Event)

A form is with a reset element that creates a onreset event By default, the reset event will reset the value to their initial state. With a inline handler You can reset a form with the following...
Html Checkbox Illustration
How to create and use a HTML checkbox ?

This article gives you all the important information about HTML checkbox and how to use them
Devtool Chrome Event Listener
How to make the difference between a Swipe/Drag vs Click/Tap event

This article shows you how to make the difference between a swipe/drag and a click/tap event in Javascript.
Formdata Browser Devtool
How to use FormData and send multipart-data in the Browser (Web API )?

FormData is a web api object that represent the data of a form that should be send if the form is submited. Therefore if you have a checkbox that is not checked, formdata will not collect it. You can...

Share this page:
Follow us:
Task Runner