javascript - 单击时出现奇怪的链接行为

Question

我在使用 anchor 标记的第一次点击时得到了不同的行为，它与点击第二次、第三次、第四次......点击相反。

将 href 值设置为 "" 后，我在第一次点击时没有收到 HTTP GET。我不明白为什么第一次点击除了点击 2 之外应该有任何其他行为(及以上)。

HTML:

<div id="container"></div>
<div id="menu">
<ul>
    <li><a href="" onclick='alert("clicked")'>Menu Item 1</a></li>
    <li><a href="" onclick='alert("clicked")'>Menu Item 2</a></li>
</ul>

</div>​

Javascript:

$(document).ready(function() {

    $("#container").contextMenu({
        menu: 'menu'
    });
});​

我使用 jquery 插件创建右键单击上下文菜单

这里是Fiddle来说明问题。 第一次单击不会触发 HTTP GET，但如果再次打开菜单然后单击。它按预期启动。

Answer 1

在菜单项的点击处理程序(当前是对alert()的调用)中，您应该执行event.preventDefault();来阻止浏览器跟踪该链接。即使 href="" 为空，浏览器仍然认为这是对新页面的调用并重新加载页面。

您还可以使用 href="#" 来使用空 anchor 标记的旧技术。这不会导致浏览器加载新的 URL。