Temporarily disable all onclick events and bind them back

Question

How to disable all onclick events on a page, bind my custom function, and after the execution enable all the previous events?

I'm building a bookmarklet, which should work on any already loaded page and I'm using jQuery to handle my custom logic (the page is jquerified after it is loaded). Note, that I don't have any control which events and when are being bound.

Currently the best stable solution i found is to unbind the events, bind by custom function preventing the default action and then, reload the page. This works, however I want to avoid the reload. A partial workaround would be to reload the page and scroll to the previous position (how to achieve this effect?). Some possible solution would use iframes, but I'd prefer to avoid this.

Show your current function. – epascarello Dec 27 '12 at 15:01 — epascarello, Dec 27 '12 at 15:01

score 6 · Answer 1 · answered Dec 27 '12 at 14:53

6

it's easier to lay a div-element over all... something like

CSS

.noclick {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999; /* or maybe higher */

    background-color: transparent;
}

jQuery

jQuery(document).ready(function() {
    jQuery('body').append('<div class="noclick" />');
});

answered Dec 27 '12 at 14:53

algorhythm

8,530
3
35
47

2

what happens when the person tabs onto the page? You can still click on the elements with keyboard navigation. ;) – epascarello Dec 27 '12 at 15:00

score 2 · Answer 2 · answered Dec 27 '12 at 14:55

A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.

The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.

One more way is to use the jQuery BlockUI plugin.

score 1 · Answer 3 · answered Dec 27 '12 at 15:05

1

You can reassign the onclick to another property and than override it.

Example with one element

var btn = document.getElementById("button");
btn._onclick = btn.onclick;
btn.onclick = function(){ return false; };

and when you want to transfer it back to the original event

var btn = document.getElementById("button");
if (btn._onclick) {
    btn.onclick = btn._onclick;
    btn._onclick = null;
}

answered Dec 27 '12 at 15:05

epascarello

204,599
20
195
236

This doesn't work, can you check your answer and fix it? – dani24 Jun 28 '18 at 14:46

Andrew Bryant · Answer 4 · 2012-12-27T16:54:50.417

It depends on whether your onclick event is dependent on the element being clicked (i.e. whether it needs to know which element was clicked):

If it's independent, then you can just add an event handler to the body element or other parent (because the parent event gets called first, then the child, which is what you want):

$('body').click(function() { /* your code here */});

It it is dependent on the the element, then you can access the previous onclick event code that has been registered in the 'click' property of element which is being clicked, so something like this (probably being a little more specific with the selectors):

$('body *').each(function() {
  var previousClick = this.click;
  this.click = null; // remove previous
  $(this).click(function() { /* your code here */});
  $(this).click(function() { previousClick();}); // run the code that was already there.
})

Stanley Shauro · Answer 5 · 2016-05-07T06:36:34.487

Some modification algorhythm's answer. The idea is to "cover" the link by a transparent element. You can use a pseudo element (e.g. :after).

To prevent "tab key" set tabindex:

<a href="..." tabindex="-1">

Mark link with a class "disabled" on click:

$('a').on('click', function(){ $(this).addClass('disabled') })

Add css:

a.disabled:after { position: absolute; content: ""; display: block; background: white; opacity: 0.5; // optional z-index: 999; left: 0; top: 0; bottom: 0; right: 0; }

$('a').on('click', function(){ $(this).addClass('disabled') });

a.disabled:after {
    position: absolute;
    content: "";
    display: block;
    background: white;
    opacity: 0.5; // optional 
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a hreh="#" tabindex="-1">The Link</a>

Temporarily disable all onclick events and bind them back

5 Answers5