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

Question

In the case of a link:

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

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

Answer 1

A variant is via CSS, using Pointer-Events.

^{I discovered this way only this week. Hence the post here.}

Thus using in CSS pointer-events: none; mouse clicks will be ignored. This alternative is +/- recent and 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;}

In addition to this CSS method which is the cleanest, one can get the same effect using Javascript:

In case it is a tag <a>, <select> and other tags that have predetermined a behavior for when receiving a click you need to add/tie a event handler to cancel/stop the click.

There are some alternatives via javascript. Using .preventDefault() that as the English name indicates prevents default behavior.

Example:

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

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

Thus the variable is first defined and then a check of the state/value of the variable 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 tied event. Note that this option does not apply to tags like <a>, <select> and others who have a native/pre-closed behavior when they receive a click.

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 it is possible to superimpose another element, in this case transparent to without the user noticing (and without spoiling the layout) to superimpose this element that is wanted 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, making it inaccessible to the user.

Example

Answer 2

I usually use the preventDefault event, via jQuery. See:

$('.elemento').on('click', function(e) {
    e.preventDefault();
    alert('Você clicou aqui e nada aconteceu!');
});

Answer 3

Use the pointer-events is a good idea if you don’t need to support earlier versions of Internet Explorer, which I believe is not the case.

Improving a little the version of the code posted by thiagonzalez and that works in all browsers is:

$('.elemento').click(function(e){
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});

Answer 4

Different way from the previous ones, but also for others that are not links

const link = document.querySelector("a");
link.onmouseenter = ()=>{
link.style.pointerEvents = 'none';
};

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