Détection de l'élément cliqué sur

Question

J'ai un tableau avec tr où vous pouvez cliquer sur. Ces tr peuvent contenir a.

<tr id="12" href="/guestbook/edit?id=12"> 
    <td class="main"> 
     <strong>Remi</strong> 
     <a href="mailto:xxx@xxx">xxx@xxx</a> 
    </td> 
    <td class="date">05-11-2010 11:34</td> 
    <td class="number">ip</td> 
    </tr> 

Ce code jquery pour détecter le clic sur le tr

$('table tr[href]').click(function(e){ 
    document.location.href = $(this).attr('href'); 
}); 

Lorsque je clique sur l'adresse e-mail par exemple, d'abord mon client e-mail ouvre (ce qui est bon) puis l'édition de page charge (ce qui est mauvais). Est-il possible de détecter l'élément sur lequel j'ai cliqué? Si c'est un A ou un TR?

Answer 1

Vous pouvez vérifier la .target of the event et de voir ce que son .nodeName est, comme celui-ci:

$('table tr[href]').click(function(e){ 
    if(e.target.nodeName == 'A') return; 
    document.location.href = $(this).attr('href'); 
}); 

---

Comme @Hannes dit dans les commentaires cependant, il est préférable d'utiliser au moins un attribut de données ici, comme celui-ci :

<tr id="12" data-href="/guestbook/edit?id=12"> 

Puis dans votre code:

$(this).attr('data-href'); 

Ou, en jQuery 1.4.3+:

$(this).data('href'); 

Answer 2

Lorsqu'un événement click se produit, il est d'abord déclenché sur l'élément que vous cliquez dessus, puis propagées aux éléments parents, ce qui déclenche leurs gestionnaires onclick. Vous pouvez le faire en addititon le code que vous avez:

$('tr[href] a').click(function(e) { 
    $(e.target).closest('tr[href]').trigger('click'); 
    return false; // stop event propagation (email client won't be called) 
}); 

Mais je vous recommande de supprimer les points d'ancrage de la modifier et de supprimer, parce que vous séduise votre utilisateur de cette façon.