避免在主干事件处理程序中使用 event.preventDefault() 样板答案

【问题标题】：avoid event.preventDefault() boilerplate in backbone event handlers避免在主干事件处理程序中使用 event.preventDefault() 样板
【发布时间】：2012-12-19 00:52:17
【问题描述】：

我有很多以链接开头的 Backbone.js 操作

<a href="#makeCookies">Make Cookies</a>

还有一个 Backbone.View 事件散列，如

'click [href=#makeCookies]': 'makeCookies'

还有一个像

这样的事件处理函数

makeCookies: function (event) {
    event.preventDefault();
    //code to make cookies
    //I have no intention of ever using #makeCookies in the URL,
    //it's just there so I can wire up the event handler properly
}

有没有一种干净的方法可以避免该样板文件event.preventDefault()。我想过只使用<button> 标签而不是<a> 标签，但这似乎不合适。

【问题讨论】：

我实际上认为<button> 比<a> 更适合您可以按下但不会自然地将您带到单独页面的任何内容：如果按下某个东西不会更改URL那么那个东西根本就不是<a>。 <button> 还具有拥有disabled 属性的巨大优势。只要确保你说<button type="button"> 以避免不同的浏览器假定type 属性的默认值不同。
+1 按钮的使用
我猜这可能是要走的路。我的 2.5 烦恼是 <button type="button" class="makeCookies"> 几乎与 event.preventDefault() 一样多的样板，然后如果我希望它只是一个文本链接，我必须将其设置为与默认样式相反的样式。人们对使用<span class="makeCookies">Make Cookies</span> 有何看法？
使用<a>s 的想法是爬虫可以在解析您的页面时遵循hrefs，即使他们不“说”javascript。当然，如果您的应用程序不是公开的，或者您没有采取措施（例如服务器端渲染）将渲染的页面首先交付给爬虫，那么真的没有理由坚持<a>s。
好吧，导航到其他资源的链接可以有 href 并在浏览器中运行时执行 preventDefault 操作，但对爬虫仍然有用，但“登录”链接不会更改 URL并且只是弹出一个登录对话框不需要href。

标签： javascript-events backbone.js

【解决方案1】：

如果您仍然打算丢弃它，为什么还需要具有 href 属性？只使用一个类名怎么样？

HTML 代码：

<a class="makeCookies">Make Cookies</a>

查看代码：

'click .makeCookies': 'makeCookies'
...
makeCookies: function (event) {
    // No need for event.preventDefault() anymore!
}

【讨论】：

这可能工作得很好。必须手动添加 cursor: 指针样式，因为浏览器似乎只有在具有 href 属性时才会这样做。
是的。我一直不明白为什么浏览器会这样做。
设置href 等于javascript:void(0);。这将为您提供光标并将a 保留为链接。
如果您担心页面报告“内容安全策略”(CSP)，请避免使用“javascript:”链接。它们也可能违反 http/https 的严格性。见en.wikipedia.org/wiki/Content_Security_Policy

【解决方案2】：

您可以将 prevent-default 处理程序添加到文档元素。像这样：

$(document).click(function (e) {
    if (e.target.tagName === "A") {
        e.preventDefault();
    }  
})

这当然会禁用所有由 a-tags 启动的导航，但如果您的应用为此提供了自定义处理，那么这应该不是问题。

如果您想让一些 a-tags '通过'，那么您可以在 prevent-default 处理程序中添加更多条件，例如检查 href 属性的值是否以 '#' 开头。

【讨论】：

这是我，发布此答案多年后。从那以后，它似乎被否决了几次。神秘地。如在，没有评论提供任何形式的解释为什么这不是一个合适的答案。也许不是，但我（和其他所有人）无法知道。这会适得其反，对任何人都没有帮助。我会感谢任何未来的投票者通过提供简短的理由来提供帮助。干杯:)