Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The only advantage that I can think of to using <code>javascript:void(0)</code> is that it will be supported even by the oldest browsers. That said, I would use one of the other <em>unobtrusive</em> approaches you have mentioned:</p> <ul> <li>For most uses, <code>event.preventDefault()</code> and <code>return false</code> can be used interchangeably.</li> <li><code>event.preventDefault()</code> will prevent the page from reloading, as desired, but will allow the click event to bubble up to the parent. If you want to stop the bubbling, you can use it in conjunction with <code>event.stopPropagation</code>.</li> <li><code>return false</code> will additionally stop the event from bubbling up to the parent.</li> </ul> <p>I say 'interchangeably' in the first point above because much of the time we do not care whether or not an event bubbles up to the parent(s). However, when <em>do</em> we need some fine-tuning, we should consider points two and three.</p> <p>Consider the following example:</p> <pre><code>&lt;div&gt;Here is some text &lt;a href="www.google.com"&gt;Click!&lt;/a&gt;&lt;/div&gt;​ $("a").click(function(e) { e.preventDefault(); }); $("div").click(function() { $(this).css("border", "1px solid red"); }); ​ </code></pre> <p>Clicking on the anchor will prevent the default action of the event from being triggered, so the browser will not redirect to www.google.com. However, the event will still 'bubble up' and cause the div's click event to fire, which will add a border around it. Add <code>e.stopPropagation()</code> <em>or just</em> <code>return false</code> and the div's click event will not fire. You can mess with it here: <a href="http://jsfiddle.net/cMKsN/1/" rel="noreferrer">http://jsfiddle.net/cMKsN/1/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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