délégation événement click simple ne fonctionne pas

Question

J'ai un div

<div class="myDiv"> 
    <a href="#" class="myLink">somelink</a> 
    <div class="anotherDiv">somediv</div> 
</div> 

Maintenant, en utilisant la délégation de l'événement et le concept de bouillonnement, je voudrais intercepter les clics de l'un des myDiv, myLink et anotherDiv.

Selon les meilleures pratiques cela pourrait se faire en écoutant les clics à l'échelle mondiale (d'où le terme « délégation ») sur le document lui-même

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.is('.myDiv')) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

Voir ma question d'alerte ci-dessus. J'étais sous l'impression que les clics bulle. Et c'est un peu parce que le document reçoit mon clic et commence à déléguer. Mais le mécanisme de bulles pour les clics sur myLink et anotherDiv ne semble pas fonctionner car l'instruction if ne démarre pas.

Ou est-ce comme ceci: les clics ne font qu'un seul mouvement, de l'élément src cliqué à objet de délégation affecté (dans ce cas, le document)? Si tel est le cas, alors je dois gérer la délégation comme ceci:

$('.myDiv').click(function(e) { 
    //...as before 
}); 

Mais ce genre de defeates l'usage de la délégation que je dois maintenant avoir beaucoup de gestionnaires « myDiv » et peut-être d'autres ... il est mort facile d'avoir juste un objet de délégation d'événement 'document'.

Quelqu'un sait comment cela fonctionne?

Answer 1

La cible d'événement ne changera pas. Vous devez refléter ce que fait réellement jquery et vérifier si $ eventElem.closest ('. MyDiv') fournit une correspondance.

Essayez:

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.closest('.myDiv').length) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

Answer 2

Vous devez utiliser l'événement en direct de JQuery (depuis 1.3), il utilise la délégation de l'événement:

http://docs.jquery.com/Events/live

donc votre code sera: Avec cela,

$(".myDiv").live("click", function(){ 
     alert('Alert when clicking on myLink elements. Event delegation powaa !'); 

}); 

vous avez toutes les bénéfices de la délégation d'événement (plus rapide, un écouteur d'événement etc.), sans la douleur ;-)

Answer 3

Event.target est toujours l'élément qui a déclenché l'événement, donc lorsque vous cliquez sur 'myLink' ou 'anotherDiv', vous stockez une référence à ces objets en utilisant $ (e.target); Donc ce que vous faites est: $ ('. MyLink'). Is ('. MyDiv') qui retourne false, et c'est pourquoi alert() n'est pas exécuté.

Si vous souhaitez utiliser la délégation de l'événement de cette manière, vous devriez vérifier wheter event.target est l'élément ou l'un de ses enfants, en utilisant jQuery cela pourrait se faire comme ceci:

$(e.target).is('.myDiv, .myDiv *') 

Answer 4

semble fonctionner très bien pour moi. Essayez-le ici: http://jsbin.com/uwari

Answer 5

Check this out: Un gestionnaire de clic sur une page

var page = document.getElementById("contentWrapper"); 
page.addEventListener("click", function (e) { 
    var target, clickTarget, propagationFlag;  
    target = e.target || e.srcElement; 
    while (target !== page) { 
     clickTarget = target.getAttribute("data-clickTarget"); 
     if (clickTarget) { 
      clickHandler[clickTarget](e); 
      propagationFlag = target.getAttribute("data-propagationFlag"); 
     } 
     if (propagationFlag === "true") { 
      break; 
     } 
     target = target.parentNode; 
    } 
});