I discovered this way only this week. Hence the post here.
So 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+).
adding and removing a class with this CSS
In case you are a
<select> tag and other tags that have predefined a behavior for when they are clicked, you must add / bind a
event handler to cancel / stop the click.
.preventDefault() as the name in English indicates prevent default behavior.
So the variable is first defined and then a variable status / value check is placed inside the function called by the click:
var bloqueado = true;
// dentro da função chamada pelo evento 'click'
if (bloqueado) return false;
Another option is to remove the tethered event. Note that this option does not apply to tags such as
<select> , and others that have a native / predefined behavior when they are clicked.
You can also use a DOM element to block the click.
One last suggested option here is to block this element with another element. Using
z-index it is possible to override another element, in this case transparent so that the user does not notice (and not ruin the layout) override this element that wants to "protect" from clicks, or other interaction. Note that this option prevents for example from selecting text and other events in elements that may be visible, thus being inaccessible to the user.