javascript – How to prevent a click on a link/anchor or element with tied event

Question:

In case of a link:

<a href="http://www.google.com">Google</a>

or in the case of another element that has an event tied with addEventListener , what alternatives are there to prevent the content from being "clicked" and that triggers an action such as following a link, opening a select or other javascript-configured action?

Answer:

One variant is via CSS, using pointer-events .

I discovered this way just this week. Hence the post here.

So using in CSS pointer-events: none; mouse clicks will be ignored. This alternative is +/- recent as it is supported in HTML elements by more modern browsers (IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+).

Example
adding and removing a class with this CSS pointer-events: none;

Apart from this CSS method which is the cleanest, the same effect can be achieved using Javascript:

If it is an <a> , <select> tag and other tags that have a default behavior for when they receive a click, it is necessary to add/tie an event handler to cancel/stop the click.

Via javascript there are some alternatives. Using .preventDefault() as the English name indicates prevents the default behavior.

Example:

elemento.addEventListener('click', function(event){
    event.preventDefault();
});

Another option is to prevent clicking with javascript by creating a variable to intercept or not the event:

Thus, the variable is defined first and then a verification of the variable's status/value is placed inside the function called by click:

var bloqueado = true;
// dentro da função chamada pelo evento `click`
if (bloqueado) return false;

Example

Another option is to remove the tethered event. Note that this option does not apply to tags like <a> , <select> and others that have a native/preset behavior when clicked.

You can also use a DOM element to block the click.

One last option suggested here is to lock this element with another element. Using z-index is possible to overlay another element, in this case transparent so that the user doesn't notice (and without spoiling the layout) overlay this element that you want to "protect" from clicks, or other interaction. Note that this option prevents, for example, selecting text and other events in elements that may be visible, thus becoming inaccessible to the user.

Example

Scroll to Top