disable all click events on page (javascript)

Question

Whats the easiest way to temporarily disable all mouse click/drag etc events through javascript?

I thought I could do document.onclick = function() { return fa

Answer 1

To prevent the default behavior of an event, use event.stopPropagation() and event.preventDefault() in your event handler. And don't forget, return false; is another method for indicating that you want to cancel the default action...

The Event property returnValue indicates whether the default action for this event has been prevented or not. It is set to true by default, allowing the default action to occur. Setting this property to false prevents the default action. (Source: MDN Web Docs: Event.returnValue.)

Typically, we return a value from any function when it has any meaningful or useful purpose -- return false to cancel an event is meaningful because it indicates a failed event, and it's useful because the event-handler uses it.

For greatest cross-browser compatibility, remember to return false;...

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
    return false;
}

Answer 2

The winning answer works well, but if you had pass the capture true boolean value, at the moment you want to remove the listener, you have to pass the exact same value. Otherwise, the listener removal will not work.

Example:

listener addition

document.addEventListener('click', DisableClickOnPage.handler, true);

listener removal

document.removeEventListener('click', DisableClickOnPage.handler, true);

Doc: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Answer 3

window.addEventListener("click", (e) => {
  e.stopPropagation();
  e.stopImmediatePropagation();
  e.preventDefault();
}, true)

If we added a listener to document instead of window anyone can add a listener to window and it works. Because of document child of window and its events trigger always after window events.

We use 3 method of Event object.

stopPropagation for prevent all capturing and bubbling

stopImmediatePropagation for prevent same listeners (e.g. another window click listeners)

preventDefault for prevent all user agent event (e.g anchor href or form submit)

Answer 4

If onclick = null has been executed how to revoke the onclick event to normal functioning.. or

<a href="www.somesite.com" onclick="return yourFunction(this)">Link text</a>

<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>

Answer 5

This article would probably be useful:

http://www.computerhowtoguy.com/how-to-use-the-jquery-unbind-method-on-all-child-elements/

One part in particular is a recursive function that removes all click events. Remember that jQuery will remove click events IF the click event was created using jQuery. the function given in the article will remove both those created with jQuery and those that were not. The function given is this:

function RecursiveUnbind($jElement) {
    // remove this element's and all of its children's click events
    $jElement.unbind();
    $jElement.removeAttr('onclick');
    $jElement.children().each(function () {
        RecursiveUnbind($(this));
    });
}

You would call the function like this:

RecursiveUnbind($('#container'));

That function takes a jQuery object parameter, but you could easily change it up to pass a string as the name of the ID for the element, or however you think is best.

Answer 6

Dynamically disable all clicks on page

let freezeClic = false; // just modify that variable to disable all clics events

document.addEventListener("click", e => {
    if (freezeClic) {
        e.stopPropagation();
        e.preventDefault();
    }
}, true);

I often use it while loading or to avoid user to accidentally clic twice on an action button. Simple and performance friendly :)

Please check this working example

Alternative CSS way

Another one that I really like because of the visual feedback the user got:

/* style.css */
.loading {
    cursor: wait; /* busy cursor feedback */
}

.loading * {
    /* disable all mouse events on subElements */
    pointer-events: none; 
}

Then you just need to do:

$('#my-item').addClass('loading');
await myAsyncFunction() // wait until the function complete
$('#my-item').removeClass('loading');