Prevent clicking on link while page loading

I have a web page with some links, and I need to in开发者_运维问答tercept the link-clicking event by jQuery. The task is finished well, but then a problem arises: if the user click a link when JavaScript doesn't finish loading, it link to another page (which is an error).

I have tried to find a way to disable link-clicking before page loading finish, but the best solution now is that I must add onclick="return false;" into my links, which is not very elegant. Is there any better solution?

You could try using an initialization script:

<script language="javascript">

var loaded = false;

function SetLoaded() { loaded = true; }

window.onload = SetLoaded;

</script>

Then you can add onclick="return loaded;" to your href. Since loaded won't be true until the page loads, it should disable any link with this added.

Today i was facing this issue so i did R&D and figured out another way of it. document.readyState will be 'complete' after page load so you can check its value like.

 if(document.readyState=='complete')
 {
   //// call script or do anything which you want to do.
 }

Have jQuery set up the hrefs in the links in your document.ready(). Maybe prefix your links with a '#', and have jQuery strip them out.

Here is a solution I have worked out: Using a masker put in front of the link to prevent clicking event.

<div class="LinkMasker"></div>

.LinkMasker {
    position: absolute;
    z-index: 999;
    width: ...px;
    height: ...px;
}

After page loading & my event are all registered, I remove the masker:

$('.LinkMasker').remove();