Problème JQuery avec les événements de souris imbriquées

Question

Je semble rencontrer un problème lors de l'utilisation de ces trois événements en même temps.

J'ai un grand div qui a lié mouseup, mousedown et mousemove. A l'intérieur de cette grande div, il y a plusieurs petites divs (que j'aimerais cliqueter). Je devrais ajouter que l'élément clickable est un enfant de la div plus grande.

Le problème est que l'événement click ne semble pas fonctionner. Cependant, si je commente les autres événements de souris, cela fonctionne très bien.

Je suppose qu'il y a une sorte de conflit d'événements ici, car un clic est vraiment une combinaison de mousedown et de mouseup.

<script type="text/javascript"> 
      $(document).ready(function() { 
       //Create tooptips for existing zones 
       $('.oldBox').tipsy({ 
        title: 'data-callrange', 
        gravity: 'sw' 
       }); 

       var x1,y1; 
       $('.openTab .img_container').live('mousedown', function(e) { 
        e.preventDefault(); 


       }); 

       $('.openTab .img_container').live('mousemove', function(e) { 

       }); 

       //Process just created box 
       $(document).mouseup(function() { 

       }); 

       $('.oldBox').live('click', function(){ 
        $('#mouse_pos').html('You clicked '+ $(this).attr('data-callrange')); 
       }); 
      }); 
    </script> 

Answer 1

Dans les événements du parent div, vous pouvez vérifier pour vous assurer que l'élément clicked (la cible d'événement) était en fait la div parent, et non la div enfant. Voir this fiddle à titre d'exemple.

Dans les gestionnaires d'événements pour le parent div, utilisez quelque chose comme:

if(event.target.id == "i_am_a_big_div_with_three_events") { 
    //Do stuff 
} 

et FIXER votre événement click à l'enfant div normalement.