I need to disable any activity on a web page before a flag is set. Let's ignore the flag and say I just want to disable any clicking on the page forever. I thought it would be as simple as:

$(window).click(function(e) {
    e.preventDefault();
});

Given the above, I can still, however, click links just fine.

How can I render all clicking inert?

I need to disable any activity on a web page before a flag is set. Let's ignore the flag and say I just want to disable any clicking on the page forever. I thought it would be as simple as:

$(window).click(function(e) {
    e.preventDefault();
});

Given the above, I can still, however, click links just fine.

How can I render all clicking inert?

• javascript
• jquery
• events

• Just a question though Why would you want to do that? – Akshay Khandelwal Commented Oct 10, 2013 at 17:15

6 Answers 6

You can't proceed like this because the click is first catched by the link before it is forwarded to the enclosing elements.

The simplest solution would be to put an invisible div over the window :

#mask {
    position: fixed;
    left:0; right:0; top:0; bottom:0;
}

As pointed by Connor, you might need to set a z-index (in fact it depends on the rest of the page).

Demonstration

Besides dystroy answer other thing you can do is set a class no-click to your body and the following css

body.no-click * {
    pointer-events: none;
}

To enable clicks, just remove the class no-click from your body

If you need support < IE 11, forgot about pointer-events. Compatibility

DEMO

This is what I'd do:

var done = false;
$('body').on('click', '*', function(e) {
    if (!done) e.preventDefault();
}).on('load', function() {
    done = true;
});

If you'd need to pletely stop clicks on the page, you could unbind all click events, like in this answer:

https://stackoverflow./a/13056681/303552

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($(window));

By just returning false

$("*").on("click",function(e) {
    e.preventDefault();
return false
});

or

$("*").on("click",function(e) {
    e.preventDefault();
e.stopPropagation()
});

Both of these stop the propagations to their parent elements and hence the default gets prevented

I think this is what you're looking for. Using namespaces so you don't undo any other click events.

NOTE: The click that does the preventing must be above any other script tags.

Example: http://jsfiddle/qNuRA/2/

$('*').on('click.startup', function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
});

$(document).ready(function () {
    $('*').off('click.startup');
});