Une div jQuery glissante avec une div incorporée qui a un gestionnaire de clic. Comment empêcher le gestionnaire de clics de se déclencher ?

Question

J'ai le morceau de jquery suivant :

http://jsfiddle.net/tad604/Ck2qk/10/

Je veux que le gestionnaire de clic de la division foo ne se déclenche pas lorsque vous cliquez et faites glisser. J'ai essayé de faire toutes sortes de choses à l'intérieur des événements de début et de fin du déplacement (event.stopPropagation() etc.), mais sans succès. Le gestionnaire de clic est déclenché après l'événement de déplacement, quoi qu'il en soit.

Answer 1

C'est ennuyeux, mais la seule solution est de supprimer l'événement au démarrage du drag et de le remettre à l'arrêt du drag. Essayez ceci :

$(".foo").click(function(){
    alert("blah");
});
$(".bar").draggable({
    stop: function(event) { setTimeout(function() {
        $(".foo").click(function(){
            alert("blah");
        }); }, 100)},
    start: function(event) { $('.foo').unbind('click'); }                
});

Maintenant, il y a toujours le problème que vos événements de clic sont probablement un peu plus compliqués que cela, et vous ne voulez probablement pas avoir à les réécrire. Vous pouvez enregistrer les événements pour plus tard en utilisant les données jquery comme ceci :

var events = $('#test').data("events") ;

Vous pouvez également utiliser la fonction jquery live pour attacher l'événement de clic afin que l'événement ne soit jamais lié qu'à un élément qui correspond à ce sélecteur. Cela signifie que si vous modifiez la classe de l'élément pendant qu'il glisse, de sorte qu'il ne corresponde plus à ce sélecteur, il n'aura plus cet événement de clic. Quelque chose comme ceci pourrait fonctionner :

$(".bar .foo").live('click', function(){
    alert("blah");
});
$(".bar").draggable({
    stop: function(event) { setTimeout(function() {
    $(".draggableBar").removeClass('draggableBar').addClass('bar');
    }, 100)},
    start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }                
});

Il faudrait aussi mettre à jour les css pour que draggablebar ait le même style que bar.