disable all click events on page (javascript)

Whats the easiest way to temporarily disable all mouse click/drag etc events through javascript开发者_JAVA技巧?

I thought I could do document.onclick = function() { return false; }; ...etc, but that's not working.

If the objective is to disable click on the whole page then you can do something like this

document.addEventListener("click", handler, true);
    
function handler(e) {
  e.stopPropagation();
  e.preventDefault();
}

true argument in addEventListener would ensure that the handler is executed on the event capturing phase i.e a click on any element would first be captured on the document and the listener for document's click event would be executed first before listener for any other element. The trick here is to stop the event from further propagation to the elements below thus ending the dispatch process to make sure that the event doesn't reach the target.

Also you need to stop default behavior associated with event target elements explicitly as they would be executed by default after the dispatch process has finished even if the event was stopped propagating further from above

It can be further modified to use selectively.

function handler(e) {
  if(e.target.className=="class_name"){
    e.stopPropagation();
    e.preventDefault();
  }
}

handler modified this way would disable clicks only on elements with class "class_name".

function handler(e) {
  if(e.target.className!=="class_name") {
    e.stopPropagation()
  }
}

this would enable clicks only on elements with class "class_name". Hope this helped :)

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');

If you want absolutely nothing draggable/clickable, disabling typing in input fields etc, I'd consider showing a absolutely positioned transparent div over the entire page, so that every click will be on the div, which will do nothing. That will grant you swift and neat switching on and off of this click-disabler, without having to register heaps of listeners

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

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)

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>

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.

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;
}