Question

我遇到跨浏览器本机事件与CallBack事件的问题。

我有一个带有给定href=""的HTML链接“Click Me”。在dom:loaded我将一个函数附加到此链接（用于执行Ajax Stuff）。

在页面末尾加载JavaScript代码以遵循YSlow Recommandation。

问题：

如果你真的很快加载这个页面（按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="">

最好的问候

Answer 1

你可以看看这个：

JQuery有一个方便的小功能尽快启动您的JavaScript 文档对象模型准备就绪...... 它发生在页面之前装完了。

$(document).ready(function(){   //
 Your code here... 
});

via

你还可以在页面加载时将一个大的禁用div放在所有内容之前禁止点击，但我不推荐它。

不确定我的问题是否正确，如果我没有，请告诉我

Answer 2

我们在许多浏览器上对CMS进行了很多测试。

按速度排序：

JavaScript无法在真正快速点击之前执行
onclick =“return false”在大多数情况下都能正常工作
JavaScript做2.）onLoad太慢但可能是
DIV使用as shield会带来其他问题并且不是一个好选择

Answer 3

看起来你手头的东西很好，而你所要做的就是创建一些链接，这些链接在没有优雅降级的区域中 nothing 。

在这些情况下，我建议使用以下格式的链接：

<a href="javascript:void(0);">Linktext</a>

在启用或禁用javascript的情况下，此链接在功能上绝对无效。

重要提示

虚空中的数字零是绝对必要的。否则Internet Explorer会抱怨。
使用“javascript：void（0）;”微软强烈反对，因为奇怪的事情可能会发生。为了避免大多数错误，请不要在void（0）链接中包装除文本之外的任何内容。
在做出决定之前，请务必仔细考虑是否添加“javascript：void（0）;”实际上是一个比添加返回false的onclick更好的解决方案。

删除href属性时

从链接中删除href属性是有效的XHTML。尽管是有效的XHTML，您的链接将失去其自动链接样式。如果访问链接，不再有下划线，没有更多颜色，没有更多悬停，也没有更多自动颜色更改。

由于以下方面的支持，您无法修复CSS缺少样式：在Internet Explorer中悬停。

在dom：loaded之前处理浏览器本机点击

3 个答案: