Hi, I have an issue with Cross-Browser native events vs CallBack events.
I have an HTML link "Click Me" with a given href="". On dom:loaded I attach a function to this link (to do Ajax Stuff).
JavaScript code is loaded at the end of the page to follow YSlow Recommandation.
Issue:
If you load this page really quickly (pressing F5) then click on link then
- the
alert()is not called - the link is followed (reloading the page)
It happens when the server lags. In fact the page has not finished loading and the browser execute the code.
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<a href="#toolate" id="action">Click Me</a>
<!-- According to YSlow Recommandation load at the bottom -->
<script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
<script>
/* <![CDATA[ */
document.observe('dom:loaded', function() {
$('action').observe('click', function(event){ alert("click"); Event.stop(event); });
});
/* ]]> */
</script>
</body>
</html>
Turn Around:
A turn around is to add onClick="return false;":
<a href="#toolate" id="action" onClick="return false;">Click Me</a>
It works for lags but not for quick click. And I don't like this kind of turn around because my goal is to remove the onclick on all <a href="">
Best Regards