クロスブラウザのネイティブイベントとコールバックイベントに問題があります。
与えられたHTMLリンク「ClickMe」がありますhref=""
。このdom:loaded
リンクに関数をアタッチします(Ajaxスタッフを実行するため)。
YSlow Recommandationに従うために、JavaScriptコードがページの最後にロードされます。
問題:
このページを非常にすばやくロードする場合(F5キーを押す)、リンクをクリックしてから
- は
alert()
呼び出されません - リンクをたどる(ページをリロードする)
サーバーが遅れたときに発生します。実際、ページの読み込みは完了しておらず、ブラウザはコードを実行します。
デモ:
<!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>
ターンアラウンド:
ターンアラウンドは追加することonClick="return false;"
です:
<a href="#toolate" id="action" onClick="return false;">Click Me</a>
ラグには機能しますが、クイッククリックには機能しません。そして、私の目標はonclick
すべてを取り除くことなので、私はこの種の方向転換が好きではありません<a href="">