StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Doing <code><a href="#" onclick="myJsFunc();">Link</a></code> or <code><a href="javascript:void(0)" onclick="myJsFunc();">Link</a></code> or whatever else that contains an <code>onclick</code> attribute - was okay back five years ago, though now it can be a bad practice. Here's why:</p> <ol> <li><p>It promotes the practice of obtrusive JavaScript - which has turned out to be difficult to maintain and difficult to scale. More on this in <em><a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="noreferrer">Unobtrusive JavaScript</a></em>.</p></li> <li><p>You're spending your time writing incredibly overly verbose code - which has very little (if any) benefit to your codebase.</p></li> <li><p>There are now better, easier, and more maintainable and scalable ways of accomplishing the desired result.</p></li> </ol> <h2>The unobtrusive JavaScript way</h2> <p>Just don't have a <code>href</code> attribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then attach your JavaScript functionality using graceful and unobtrusive best practices - which are more maintainable as your JavaScript logic stays in JavaScript, instead of in your markup - which is essential when you start developing large scale JavaScript applications which require your logic to be split up into blackboxed components and templates. More on this in <em><a href="http://speakerdeck.com/u/addyosmani/p/large-scale-javascript-application-architecture" rel="noreferrer">Large-scale JavaScript Application Architecture</a></em></p> <h2>Simple code example</h2> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Cancel click event $('.cancel-action').click(function(){ alert('Cancel action occurs!'); }); // Hover shim for Internet Explorer 6 and Internet Explorer 7. $(document.body).on('hover','a',function(){ $(this).toggleClass('hover'); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>a { cursor: pointer; color: blue; } a:hover,a.hover { text-decoration: underline; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="cancel-action">Cancel this action</a></code></pre> </div> </div> </p> <h2>A blackboxed <em><a href="http://documentcloud.github.com/backbone/" rel="noreferrer">Backbone.js</a></em> example</h2> <p>For a scalable, blackboxed, Backbone.js component example - <em><a href="http://jsfiddle.net/balupton/sTzdD/" rel="noreferrer">see this working jsfiddle example here</a></em>. Notice how we utilize unobtrusive JavaScript practices, and in a tiny amount of code have a component that can be repeated across the page multiple times without side-effects or conflicts between the different component instances. Amazing!</p> <h2>Notes</h2> <ul> <li><p>Omitting the <code>href</code> attribute on the <code>a</code> element will cause the element to not be accessible using <code>tab</code> key navigation. If you wish for those elements to be accessible via the <code>tab</code> key, you can set the <code>tabindex</code> attribute, or use <code>button</code> elements instead. You can easily style button elements to look like normal links as mentioned in <em><a href="https://stackoverflow.com/a/8525002/130638">Tracker1's answer</a></em>.</p></li> <li><p>Omitting the <code>href</code> attribute on the <code>a</code> element will cause <a href="http://en.wikipedia.org/wiki/Internet_Explorer_6" rel="noreferrer">Internet Explorer 6</a> and <a href="http://en.wikipedia.org/wiki/Internet_Explorer_7" rel="noreferrer">Internet Explorer 7</a> to not take on the <code>a:hover</code> styling, which is why we have added a simple JavaScript shim to accomplish this via <code>a.hover</code> instead. Which is perfectly okay, as if you don't have a href attribute and no graceful degradation then your link won't work anyway - and you'll have bigger issues to worry about.</p></li> <li><p>If you want your action to still work with JavaScript disabled, then using an <code>a</code> element with a <code>href</code> attribute that goes to some URL that will perform the action manually instead of via an Ajax request or whatever should be the way to go. If you are doing this, then you want to ensure you do an <code>event.preventDefault()</code> on your click call to make sure when the button is clicked it does not follow the link. This option is called graceful degradation.</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload