I have a web page with some links, and I need to intercept 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?

I have a web page with some links, and I need to intercept 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?

• javascript
• html
• jquery
• jquery-events

• 3 Why not send the href as another attribute, and then copy that attribute to href when the link is ready to be clicked on? – jrockway Commented Feb 8, 2011 at 3:32
• @jrockway: thanks for the remendation, but I think it's not convenient to do that. – Hoàng Long Commented Feb 8, 2011 at 4:53

4 Answers 4

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 'plete' after page load so you can check its value like.

 if(document.readyState=='plete')
 {
   //// 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();