web-dev-qa-db-fra.com

Javascript click et mousedown conflicting

J'ai un scénario dans lequel j'utilise click pour insérer un div, puis mousedown sur ce div pour le faire glisser. J'ai lié le click au conteneur parent et le mousedown sur le div lui-même. Mais lorsque je mousedown sur le div, il clique également sur le parent, insérant ainsi plusieurs divs au lieu de faire glisser le div déjà ajouté!

Y a-t-il un moyen de résoudre ce problème? Je ne peux pas dissocier click, car je dois ajouter 2 divs à l'aide de click, puis lier mousedown à ceux-ci.

Mise à jour: J'utilise le type de liaison selector.on(event, handler). 

jqueryjavascript-eventsevent-handlingmouseevent
15
Rutwick Gangurde

Essayez de cette façon. Parce que event.stopPropagation n'arrête pas l'événement click click, en descendant de la souris. Déplacez la souris et cliquez sur les événements ne sont pas liés.

 var mousedDownFired = false;

  $("#id").mousedown(function(event){
      mousedDownFired =true;
      //code
  });

  $("#id").click(function(event){
     if(mousedDownFired)
      {
         mousedDownFired = false;
         return;
      }
      //code
 });

Mis à jour:

NON . Les événements de souris sont déclenchés comme ceci

1) MouseDown

2) Cliquez

3) MouseUp

si mouse down est déclenché, flag sera activé après qu'un clic vers le bas déclenchera . Dans cet événement click désactivera la variable flag. cela fonctionnera de manière cyclique. ne va pas envisager deux souris vers le bas ou deux clics 

16
YogeshWaran

Ce que vous voulez probablement faire est d’attacher les gestionnaires d’événements au conteneur parent plutôt qu’aux divs enfants individuels. Ainsi, à mesure que de nouveaux enfants sont créés, vous n'avez pas besoin d'ajouter de gestionnaires d'événements supplémentaires.

Par exemple:

$("#parentDiv").on('click','.childDiv',function() {
    event.stopPropagation();
}).on('mousedown','.childDiv',function() {
    // your dragging code
});

Lorsque vous fournissez un sélecteur à la fonction .on (), la fonction transmise est appelée pour les descendants correspondant à ce sélecteur.

4
zkhr

Vous pouvez utiliser event.stopPropagation ().

Exemple : 

$("#button").mousedown(function(event){
event.stopPropagation();
// your code here
});

$("#button").click(function(event){
event.stopPropagation();
// your code here
});

Regardez cette page http://api.jquery.com/event.stopPropagation/

1
aimadnet
            var timestamp = 0;
    jQuery('ul.mwDraggableSelect a',element).mousedown(function(event){
        timestamp = new Date().getTime();
    });

    jQuery('ul.mwDraggableSelect a',element).click(function(event){
        var interval = 400;//if a mousedown/mouseup is longer then interval, dont process click
        var timestamp2 = new Date().getTime();
        if((timestamp2 - timestamp)>interval){ return false; }

                    /* your code here */
            });
0
ShaunTheSheep