title: Cancel click on parent when mousedown on child
body: <p>I've read several posts similar questions as this one, but none of them worked for me.</p>
  <p>There are two divs, one is the parent of the other:</p>
  <pre><code>&lt;parent&gt;
    &lt;son&gt;&lt;/son&gt;
  &lt;/parent&gt;
  </code></pre>
  <ul>
  <li>&quot;Son&quot; has event handlers for <code>mousedown</code>, <code>mousemove</code> and <code>mouseup</code>.</li>
  <li>&quot;Parent&quot; has an event handler for <code>click</code>.</li>
  <li>&quot;Parent&quot; is bigger than &quot;son&quot;.</li>
  </ul>
  <p>Requirements:</p>
  <ul>
  <li>One has to be able to mousedown-mousemove-mouseup inside &quot;son&quot;. [OK]</li>
  <li>One has to be able to click &quot;parent&quot;. [OK]</li>
  </ul>
  <p>But, if somebody drags the mouse out of &quot;son&quot; and releases it, &quot;parent&quot;'s click handler fires.</p>
  <p>Is there any way to avoid it?</p>
  <p>Should I change my layout?</p>
  <p><a href="http://jsfiddle.net/g3qzkz74/17/" rel="nofollow noreferrer">http://jsfiddle.net/g3qzkz74/17/</a></p>
  <p>(Please, pure JavaScript!)</p>