Entry
How can I disable links and buttons till the page is loaded?
Nov 30th, 2001 05:05
Martin Honnen,
The following code was tested with NN4, NN6.2 and IE6. I expect it to
work with NN4+ and IE4+.
The code uses the different ways those browsers provide to handle events
at the document or window level and to prevent the propagation and/or
default action (e.g. link execution) of the event.
<html>
<head>
<script type="text/javascript">
function clickHandler (evt) {
if (document.layers)
return false;
else if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
else if (window.event)
return false;
}
function initClickPrevention () {
if (document.layers) {
window.captureEvents(Event.CLICK);
window.onclick = clickHandler;
}
else if (document.all && !document.getElementById)
document.onclick = clickHandler;
else if (document.all)
document.attachEvent('onclick', clickHandler);
else if (document.addEventListener)
document.addEventListener('click', clickHandler, true);
}
function stopClickPrevention () {
if (document.layers) {
window.releaseEvents(Event.CLICK);
window.onclick = null;
}
else if (document.all && !document.getElementById)
document.onclick = null;
else if (document.all)
document.detachEvent('onclick', clickHandler);
else if (document.addEventListener)
document.removeEventListener('click', clickHandler, true);
}
initClickPrevention();
</script>
</head>
<body onload="stopClickPrevention();">
<a href="http://JavaScript.faqts.com">JavaScript.FAQTs.com</a>
<form action="http://www.kibo.com/">
<input type="text" name="god" value="Kibo" />
<input type="submit" />
</form>
</body>
</html>
Obiously the example doesn't load any complex stuff to experience the
usefulness of the code, but you can test with
<html>
<head>
<script type="text/javascript">
function clickHandler (evt) {
if (document.layers)
return false;
else if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
else if (window.event)
return false;
}
function initClickPrevention () {
if (document.layers) {
window.captureEvents(Event.CLICK);
window.onclick = clickHandler;
}
else if (document.all && !document.getElementById)
document.onclick = clickHandler;
else if (document.all)
document.attachEvent('onclick', clickHandler);
else if (document.addEventListener)
document.addEventListener('click', clickHandler, true);
}
function stopClickPrevention () {
if (document.layers) {
window.releaseEvents(Event.CLICK);
window.onclick = null;
}
else if (document.all && !document.getElementById)
document.onclick = null;
else if (document.all)
document.detachEvent('onclick', clickHandler);
else if (document.addEventListener)
document.removeEventListener('click', clickHandler, true);
}
initClickPrevention();
</script>
</head>
<body onload="//stopClickPrevention();">
<a href="http://JavaScript.faqts.com">JavaScript.FAQTs.com</a>
<form action="http://www.kibo.com/">
<input type="text" name="god" value="Kibo" />
<input type="submit" />
</form>
</body>
</html>
that the code indeed disables the submit button and the link.
With NN6+ and IE4+ there are for buttons additionally possibilities e.g.
<body onload="document.formName.buttonName.disabled = false;">
<form name="formName" ...>
<input type="submit" id="aButton" name="buttonName"
disabled="disabled"
/>
