mouse event problem with nested elements

Question

I have something similar to the following:

 <div onclick="divClickEvent();"> <img onmousedown="imgOnDownEvent();" /> </div>

The problem is that if you mouse down on the img, the div click fires on mouse up. I tried to override the div onclick by adding an onclick="return false;" to the img element, but the div onclick is still firing. I also have a cancel bubble and return false in a document onmouseup event (which gets attached dynamically in the img ondown event).

I've run out of ideas. Why is the div still processing the event, and how do I stop it?

rahul · Accepted Answer · 2009-11-27 11:51:03Z

2

cancelBubble is Deprecated.

Use event.stopPropagation() instead of cancelBubble [non-standard method] in the onclick event of the image.

which prevents further propagation of the current event.

edited Nov 27, 2009 at 11:51

answered Nov 27, 2009 at 11:46

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fearofawhackplanet Over a year ago

IE doesn't support stopPropagation... I assume I should use cancelBubble in IE?

Igor Zinov'yev · Accepted Answer · 2009-11-27 13:36:08Z

Consider using an abstraction framework like jQuery, where you can stop propagation with the same method regardless of the browser version:

<div id="image_holder"> <img id="some_image" alt="" src="" /> </div> <script type="text/javascript"> $(document).ready(function(){ // This will be run when DOM is ready var holder = $('#image_holder'), someImage = $('#some_image'); someImage.bind('mousedown', function(event){ // This will be run on mousedown event.preventDefault().stopPropagation(); }); }); </script>

Collectives™ on Stack Overflow

mouse event problem with nested elements

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related