Hrefs 与 JavaScript onclick（关于 Unobtrusive JavaScript）
Web 开发方面我不是专家，但我喜欢学习 jQuery 等，并且发现自己订阅了 Unobtrusive JavaScript 的概念。虽然上面的两个选项都没有打破“HTML 中没有 JavaScript”的心态，但我想我对“结构和表示与行为的分离”很着迷，尽管这对我来说更自然。在其中放置一个 标签并显式设置 href，我发现自己认为这确实是行为，因此应该在 JS 中设置
，或者我只是不习惯？我的另一面看到了将其放入 JS 中的好处，因为现在我能够完全控制该链接的行为，而无需更改 HTML 中的任何内容。我想你会说我处于众所周知的围栏上。请帮我下来。 =)
（注意：该网站大量使用 JavaScript，因此在关闭 JS 的情况下提供功能的概念并不是真正的问题，因为如果没有它，大多数网站将无法运行。）
What is best practice with regard to using links/<a> tags with explicit hrefs to other pages in your site (i.e. href="/blah/blah/blah.html) vs having hrefs/divs/etc. that don't have an explicit href and have their onclick set within the document ready handler with JavaScript in say a main.js file.
I'm not an expert when it comes to web development, but I'm enjoying learning jQuery and such and find myself subscribing to the notion of Unobtrusive JavaScript. While both options above don't break the "don't have JavaScript within the HTML" part of that mentality, I suppose I'm hung up on the "Separation of structure and presentation from behavior". While it's admittedly more natural for me to put an <a> tag in there and explicitly set the href, I find myself thinking that this is really behavior and thus should be set within the JS.
Is that going to far, or am I just not used to it? The other side of me sees the benefit of putting it in the JS, b/c now I have the ability to completely control the behavior of that link without having to change anything within the HTML. I guess you'd say I'm on the proverbial fence. Please help get me down. =)
(One note: The site uses JavaScript heavily, so the notion of providing functionality with JS turned off isn't really a concern as most of the site will not function without it.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
由于多种原因，这确实太过分了。
最后，除非您明确需要打破模式（例如遗留支持），否则您应该尝试你最好遵循不显眼的设计，从使用 JavaScript 创建静态结构的意义上来说，这是非常显眼的，而使用 HTML 来创建静态结构要好得多。
That really is going too far for a multitude of reasons.
In the end, unless you have explicit need to break the mold (e.g. legacy support) you should try your best to follow unobtrusive design, and this is very obtrusive in the sense that you are using JavaScript to create a static structure, something that is far better to be done with HTML.
普通用户不会真正知道其中的区别。但是，如果您希望蜘蛛跟踪其他页面，搜索引擎和 SEO 实践将要求您使用 href="" 链接到其他页面。与访问者使用某些屏幕阅读器或有一些特殊的辅助功能需求时相同。其中许多人阅读源代码而不是 DOM。
一般来说，如果您要链接到页面和操作，请使用 href。
如果您需要附加附加功能或不真正转到另一个页面或操作，请使用 javascript onclick 样式，或使用 jQuery 附加事件。
Normal users won't really know the difference. However, search engines and SEO practices would require you to use the href="" to link to your other pages if you want the spiders to follow them. Same with if the visitor was using some screen reader or had some special accessibility needs. Many of those read the source code and not the DOM.
In general if you are linking to pages and actions use the href.
If you need to attach additional functionality or not really go to another page or action then use javascript onclick style, or use jQuery to attach events.
链接不是行为——它们代表一个文档与另一个文档之间的链接。 Web 浏览器提供了当您单击链接时导航到链接页面的行为，但这是浏览器的行为，每个浏览器对于如何最好地执行此操作都有自己的约定 - 例如，主要单击可能会打开当前页面选项卡，中键单击可能会在新选项卡中打开，M4 可能会在新页面中打开链接。用行为替换这些原始信息会破坏浏览器提供此类选择的能力。
还有其他客户也会受到影响。蜘蛛和其他机器人将读取您的页面以获取锚标记中的信息，以确定该页面链接到的内容。如果您改为使用“行为”，则会从页面中删除这些有意义的信息。
Links are not behavior — they represent links between one document and another. Web browsers offer the behavior of navigating to the linked page when you click on links, but this is the browser's behavior, and each browser has its own conventions for how best to do this — for example, primary click might open the page in the current tab, middle-click might open in a new tab, and M4 might open the link in a new page. Replacing this raw information with behavior breaks the browser's ability to offer this kind of choice.
And there are other clients that would be affected as well. Spiders and other bots will read your page for the information in your anchor tags to determine what the page is linked to. If you instead use "behavior," you're stripping this meaningful information from the page.
同意其他海报。我想补充一点，如果 href 是静态的（即该页面上的交互不会改变它的值），那么您可以将其视为页面“结构和表示”的一部分。在不寻常的情况下，它是动态的，并且页面上的某些操作改变了它的值——那就是它变成“行为”的时候——只有这样才适合让 JS 处理它。
另一方面，如果现有代码已经有 9 个动态设置的 href，而您只是添加一个静态 href，我可能会遵循以前的开发人员的指导以提高可读性。
Agree with other posters. I'd add that if the href is static -- that is interactions on that page don't change it's value -- then you can consider it part of the page's "structure and presentation". In the unusual cases where it is dynamic and some action on the page changes its value -- that's when it becomes "behavior" -- and only then would it be appropriate to let the JS handle it.
On the other hand though if the existing code already had a 9 dynamically set hrefs and you're just adding one static href, I'd probably follow the previous developer's lead for readability.
jquery历史插件非常好，它允许你设置href='#/url"，这样你就可以拥有真正的url，真正的后退按钮，但你的handers只是监听绑定到history.url的事件。
http://tkyk.github.com/jquery-history-plugin/
不使用标签也可能有对于使用屏幕阅读器的视障用户来说，存在一些可用性问题。
The jquery history plugin is pretty nice, it allows you to set href='#/url" this way you can have real urls, real back buttons, but your handers just listen for events bound to history.url.
http://tkyk.github.com/jquery-history-plugin/
Not using tags could probably also have some sort of usability problems for visually impaired users with screen readers.