problème d'événement de souris avec des éléments imbriqués

Question

J'ai quelque chose de semblable à ce qui suit:

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

Le problème est que si vous passez la souris sur le img, le clic div feux sur place de la souris. J'ai essayé de surcharger div onclick en ajoutant un onclick="return false;" à l'élément img, mais le div onclick continue de tirer. J'ai aussi une bulle d'annulation et retourne false dans un événement onmouseup de document (qui est attaché dynamiquement dans l'événement img ondown).

Je n'ai plus d'idées. Pourquoi la div traite-t-elle toujours l'événement et comment l'arrêter?

Answer 1

cancelBubble est obsolète.

Utilisez event.stopPropagation() au lieu de cancelBubble [méthode non standard] dans l'événement onclick de l'image.

qui empêche la poursuite de la propagation de l'événement en cours.

Answer 2

à l'aide d'un cadre Tenir compte de l'abstraction comme jQuery, où vous pouvez arrêter la propagation avec la même méthode quelle que soit la version du navigateur:

<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>