Cancel click on parent when mousedown on child

Question

I've read several posts similar questions as this one, but none of them worked for me.

There are two divs, one is the parent of the other:

<parent>
  <son></son>
</parent>

• "Son" has event handlers for mousedown, mousemove and mouseup.
• "Parent" has an event handler for click.
• "Parent" is bigger than "son".

Requirements:

• One has to be able to mousedown-mousemove-mouseup inside "son". [OK]
• One has to be able to click "parent". [OK]

But, if somebody drags the mouse out of "son" and releases it, "parent"'s click handler fires.

Is there any way to avoid it?

Should I change my layout?

http://jsfiddle.net/g3qzkz74/17/

(Please, pure JavaScript!)

Answer 1

You need to prevent "son" click event from bubbling up DOM tree:

function sonClick(e) {
    e.stopPropagation();
}

document.getElementById('son').addEventListener('click', sonClick, false);

Demo: http://jsfiddle.net/g3qzkz74/14/