Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><em>What I'll write here is true for <strong>jQuery events</strong>,<br> For vanilla javascript events read @T.J. Crowder comment at the bottom of the answer</em></p> <hr> <p><code>return false</code> inside a callback prevents the default behaviour. For example, in a <code>submit</code> event, it doesn't submit the form.</p> <p><code>return false</code> also stops bubbling, so the parents of the element won't know the event occurred. </p> <p><strong><code>return false</code> is equivalent to <code>event.preventDefault()</code> + <code>event.stopPropagation()</code></strong></p> <p>And of course, all code that exists after the <code>return xxx</code> line won't be executed. (as with all programming languages I know)</p> <p>Maybe you find this helpful:<br> <a href="https://stackoverflow.com/q/9730849/601179">Stop event bubbling - increases performance?</a></p> <hr> <p>A <em>"real"</em> demo to explain the difference between <code>return false</code> and <code>event.preventDefault()</code>:</p> <p><strong>Markup:</strong></p> <pre><code>&lt;div id="theDiv"&gt; &lt;form id="theForm" &gt; &lt;input type="submit" value="submit"/&gt; &lt;/form&gt; &lt;/div&gt;​ </code></pre> <p><strong>JavaScript:</strong> </p> <pre><code>$('#theDiv').submit(function() { alert('DIV!'); }); $('#theForm').submit(function(e) { alert('FORM!'); e.preventDefault(); });​ </code></pre> <p>Now... when the user submit the form, the first handler is the form submit, which <code>preventDefault()</code> -> the form won't be submitted, but the event bubbles to the div, triggering it's submit handler.</p> <p><a href="http://jsfiddle.net/zwY5p/" rel="nofollow noreferrer"><strong>Live DEMO</strong></a></p> <p>Now, if the form submit's handler would cancel the bubbling with <code>return false</code>:</p> <pre><code>$('#theDiv').submit(function() { alert('DIV!'); }); $('#theForm').submit(function(event) { alert('FORM!'); return false; // Or: event.preventDefault(); event.stopPropagation(); });​ </code></pre> <p>The div wouldn't even know there was a form submission.</p> <p><a href="http://jsfiddle.net/zwY5p/9/" rel="nofollow noreferrer"><strong>Live DEMO</strong></a></p> <hr> <p><strong>What does <code>return false</code> do in vanilla javascript events</strong></p> <blockquote> <p>return false from a DOM2 handler (<code>addEventListener</code>) does nothing at all (neither prevents the default nor stops bubbling; from a Microsoft DOM2-ish handler (<code>attachEvent</code>), it prevents the default but not bubbling; from a DOM0 handler (<code>onclick="return ..."</code>), it prevents the default (provided you include the return in the attribute) but not bubbling; from a jQuery event handler, it does both, because that's a jQuery thing. Details and live tests here – <strong>T.J. Crowder</strong></p> </blockquote>
    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. 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