How do you temporarily disable all events in javascript? We want to make them disabled, so that some events don't run until after 700 miliseconds after we click something.
How do you temporarily disable all events in javascript? We want to make them disabled, so that some events don't run until after 700 miliseconds after we click something.
Share Improve this question asked Jan 17, 2013 at 5:25 user1820022user1820022 731 gold badge1 silver badge6 bronze badges5 Answers
Reset to default 11If you're trying to temporarily disable all clicks, then a simple way to do that without changing any of the rest of your page or code is to put up a transparent div absolutely positioned over the whole page that intercepts and stops propagation of all click events. Then, use a setTimeout() to remove that transparent div at whatever time interval you want.
Put the blockDiv in your page HTML so it's already there.
In your HMTL:
<body>
<div id="blockDiv"></div>
... other page HTML here
</body>
Then, have this CSS in the page:
#blockDiv {
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 999;
}
And, this javacript:
$("#blockDiv").click(function(e) {
// stop propagation and prevent default by returning false
return false;
});
setTimeout(function() {
$("#blockDiv").remove();
}, 700);
setTimeout is what you want.
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
it takes two parameters:
1) the function or code to call and
2) the number of milliseconds to wait before executing the code/function.
setTimeout(function(){
//do your stuff
},700);
Use a setTimeout
$('a').click(function( e ){
e.preventDefault();
setTimeout(function(){
// DO SOMETHING AFTER 700ms
},700);
});
Take a look at this artical, this will show to How to listen lazily to rapidly firing events
$.fn.bindDelayEvent = function(eventName, delay, fnc){
$this = $(this);
var timer = undefined;
var delayFnc = function(){
clearTimeout(timer);
var self = this;
var args = arguments;
timer = setTimeout(function(){
fnc.apply(self, args);
}, delay);
}
$this.bind(eventName, delayFnc);
}
$(window).bindDelayEvent("resize", 1000, function () {
alert("click event fires after 1000ms")
});
How to listen lazily to rapidly firing events like window resize?
Disabling all events on the page is very easy. Hard part is to restore them when needed.
document.body.innerHTML = document.body.innerHTML;
This will effectively remove all events bound to DOM nodes by replacing the DOM with it's "virgin" copy.
Most of the time user won't even notice the redraw.
As far as restoring them after a period of time, you can experiment with saving a copy of DOM before replacing the innerHTML:
oOldDom = document.cloneNode(1);
and restoring it later on.