Question

让我们从以下示例开始：

在同一目录中创建三个页面：的test.html 的index.html

您的test.html：

<html>
 <head>
  <script>
   function test()
   {
    alert('Going to google.com?');
    window.location="http://google.com";
   }
  </script>
 </head>
 <body>
  <a href='' onclick="test();">google.com</a><br/>
  <input type="button" value="google" onclick="test();" />
  <a href='' onmouseover="test();">google.com</a><br/> 
 </body>
</html>

现在检查IE上的test.html页面以及firefox或crome。

您会注意到以下几点：

按钮效果很好。
第一个超链接在IE和其他浏览器中的工作方式不同。在IE中，它将我们带回index.html页面，而在Firefox中，它保持在同一页面上。
对于第一个超链接，window.location失败。
您无法点击第二个超链接，因为鼠标悬停事件将首先触发，并且完美无缺！

为什么？

我的主要兴趣是第3点，因为它甚至给我们提醒，window.location失败。

Answer 1

JavaScript事件触发，window.location置位，然后链接的默认操作触发，浏览器转到''，（IIRC）解析为当前URI。

这与您点击链接，然后快速单击其他链接所获得的效果相同。浏览器在收到转到第二个的指令之前没有时间去第一个，然后转到第二个。如果你延迟函数的返回（通过把警报放在第二位），它就会有足够的时间让第一个URL的请求通过，而不是第二个。

您需要取消默认操作，当您使用内部事件属性时（不推荐，unobtrusive JavaScript是前进的方式），通过返回false来完成。

onclick="test(); return false;"

Answer 2

试试这个：

<html>
 <head>
  <script>
   function test()
   {
    alert('Going to google.com?');
    window.location="http://google.com";
    return false;
   }
  </script>
 </head>
 <body>
  <a href='' onclick="Javascript:return test();">google.com</a><br/>
  <input type="button" value="google" onclick="Javascript:return test();" />
  <a href='' onmouseover="Javascript:return test();">google.com</a><br/> 
 </body>
</html>

了解HTML锚标记

2 个答案: