问题描述:

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?

Thanks!

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

(Please, pure javascript!)

网友答案:

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/

相关阅读:
Top