附加`return false;`到JavaScript中的“onClick”事件处理程序

Question

主要问题：当用户单击anchor标签时，清除#。我找到了一个解决方案，即在onClick处理程序中添加return false;

次要问题：我当前的代码看起来像这个

<a href="#" onclick="javaScript:toggleDisplay();" title="Some Title">
    @ViewBag.TotalRecords
</a>

根据我得到的解决方案，我想要这样的

<a href="#" onclick="javaScript:toggleDisplay();return false;" title="Some Title">
    @ViewBag.TotalRecords
</a>

• 如何将return false;附加到javaScript函数调用中？我可以手动完成，但有什么简单的方法可以做到这一点吗。我正在使用jQuery
• 有没有其他方法可以在不修改当前标记的情况下删除#

编辑

@ViewBag.TotalRecords：这是一个MVC3 ASP.Net的东西，但它与问题无关，所以我没有把它放在标签中。

感谢

Answer 1

你真的不应该为此使用a标记——它不是一个链接；它就像一个javascript按钮。如果愿意，可以使用CSS将其样式设置为链接，但从语义上讲，它不是锚。请考虑使用<span class="toggle-display-button"></span>或类似功能。这也将消除滚动到页面顶部并将#附加到您现在所经历的URL的不必要的副作用。

这样在标记中放入javascript也是不好的做法。您可以使用jQuery的.click方法将事件直接绑定到元素；如果您决定在将来更改页面的外观或工作方式，这会更干净、更灵活。

Answer 2

如果你不能更改你的html，或者你连接点击事件的方式，你总是可以阻止点击通过（这就是为什么url会用#更新）：

$(document).on('click', 'a', function(e) {
    if ('#' == $(this).attr('href'))
        e.preventDefault();
});

不过，你真的应该重构，18页并不多。有了一个好的IDE，它应该很快。

Answer 3

谢谢Phil，正如我所说，我从中得到了一些东西。我得到了两个解决方案，而不是一个。

如果我将以下代码添加到js文件中，则会处理所有click处理程序（稍后将使其特定于anchor）

使用纯JavaScript（Unobtrusive JavaScript）

document.addEventListener('click', function (e) {
   e.preventDefault();
   return false;
});

使用jQuery

$(document).click(function (e) {
    e.preventDefault();
    return false;
});

jQuery解决方案与elclans建议的解决方案没有什么不同，从这个意义上说，如果我做$('a').click(function(e){ e.preventDefault(); });，它适用于anchor，但我修改了我的DOM并向其中添加了新的anchor，点击这个锚点会导致查询字符串中出现#。

编辑

上面的解决方案会导致所有的点击都通过处理程序，即使我不想要。因为这种以href为url的正常anchor不工作，所以这是工作解决方案

$("a").live("click", function (e) {
   if ($(this).attr("href") != "#") return;
   e.preventDefault();
   return false;
});

希望这能帮助其他人。

Answer 4

你确定知道如何使用jQuery吗？#的意思是空链接，你不能摆脱它…

$('a').click(function(e){ e.preventDefault(); });