This is the only bulletproof way I know to prevent double clicks. The onclick event has to disable itself. You can't do "onclick='void 0;' in a function that you call from onclick because you may have already clicked three times before that function gets called.
For buttons, just do the onclick.
<input type="button" onclick="this.onclick='void 0;';someFunction();" />
For links you also have to explicitly do nothing in the href. Don't do href="#". That will not work.
<a href="javascript:void 0;" onclick="this.onclick='void 0;';someFunction();">
OK, rbohn says the following also works. If you want to separate all the logic into a single function, you can as long as the function returns false and your onclick returns false. For example: onclick="return myFunc(this);" Also, you must use el.setAttribute and not el.onclick=. el.onclick= will work in some browsers, but not others.
Another nice thing about rbohn's way is that your href can be set to # which is a bit neater. OK, well in a nicely controlled environment, with rbohn's way you can set your href to #, but in the real messy world, you need to have it set to "javascript:void 0;" or "javascript:return 0;". I have seen it break when set to #.
function myFunc(el) {
el.setAttribute('onclick','return false;');
document.forms['aviForm'].submit();
return false;
}
<a href="javascript:void 0;" onclick="return myFunc(this);">Confirm</a>
<input type="button" onclick="return myFunc(this);" />
No comments:
Post a Comment