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?

Answer 1

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.

Answer 2

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>