Obtenir l'identifiant du dernier élément cliqué

Question

J'ai une fonction comme celle-ci :

$(document).ready(function () {
          $("*").click(function () {             
              alert($(this).attr('id').toString());                
        });
    });

Et sur la page, j'ai quelque chose comme ça :

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<div id="div1">Some stuff
    <div id="div2">Some other stuff
    <asp:Button ID="Button1" runat="server" Text="Button" />        
        <div id="div3">More stuff
        <asp:Button ID="Button2" runat="server" Text="Button" />        
        </div>
    </div>        
</div>   

Si je clique sur quelque chose, cela fonctionne bien, mais je suis alerté trois fois (ou plus). Par exemple, je clique sur le bouton 2 : Je clique sur le bouton2. La boîte d'alerte apparaît avec button2.id, puis avec div3.id, div2.id etc. Elle me montre tous les identifiants sous ce bouton. Si j'essaie de stocker cet identifiant dans une variable comme ceci :

     var storedId = $(this).attr('id').toString();

Cela signifie que j'obtiens l'identifiant du formulaire 1.

Comment puis-je obtenir le premier identifiant ? L'identifiant du bouton cliqué ou de l'étiquette cliquée ou de tout ce que j'ai sur ma page.

Answer 1

Vous devez arrêter la propagation de l'événement dans l'arbre DOM afin que les éléments parents ne voient pas le même événement. Dans jQuery, vous pouvez le faire avec e.stopPropagation() :

$("*").click(function(e) {
    alert($(this).attr('id').toString());                
    e.stopPropagation();
});

Pour information, il s'agit d'une méthode très inefficace. Il est préférable d'utiliser un seul gestionnaire d'événements qui tire parti du bouillonnement d'événements et capture les événements de clics bouillonnants au niveau du document et les examine à ce seul endroit :

$(document).click(function(e) {
    alert(e.target.id);                
});

Answer 2

Vous devez arrêter la propagation des événements avec stopPropagation() :

$("*").click(function(e) {
    alert($(this).attr("id").toString());
    e.stopPropagation();
});

Méthode empêche l'événement de remonter dans l'arbre DOM, empêchant ainsi tout gestionnaire parent d'être informé de l'événement.

Answer 3

L'événement fait des bulles, ce qui permet d'afficher l'identifiant de chaque élément traversé par les bulles.

Utiliser le stopPropagation méthode pour éviter que l'événement ne fasse des bulles :

$(document).ready(function () {
  $("*").click(function (e) {             
    e.stopPropagation();
    alert($(this).attr('id').toString());                
  });
});

Answer 4

D'autres ont répondu qu'il était possible de filtrer le reste des événements "inutiles" en arrêtant leur propagation. +1, pour cette situation, je pense que c'est tout à fait correct. Cependant, je pense qu'il existe une meilleure approche que l'utilisation du sélecteur *.

$("*").click() utilise le Sélecteur de tous ("*") . Lorsque le tous les sélecteurs (*) est utilisé, il associe cet événement à chaque élément de la page. Cette approche n'est pas idéale (baisse des performances, mauvaise pratique, complexité excessive), à moins que vous n'ayez une raison de gérer un événement de clic pour cada sur la page (possible, mais très improbable).

Une meilleure approche consisterait à attribuer des événements de clic à des éléments individuels (ce qui correspond à la norme du web).

Ainsi, si l'on se place dans le cas de figure suivant

<asp:Button ID="Button1" runat="server" Text="Button" />        
<div id="div3">More stuff
    <asp:Button ID="Button2" runat="server" Text="Button" />        
    </div>
</div>    

utiliser deux gestionnaires d'événements (un pour chaque bouton)

$(document).ready(function () {
    $("#Button1").click(function () {             
          alert($(this).attr('id').toString());//note that this.id will also work                
    });
    $("#Button2").click(function () {             
          alert($(this).attr('id').toString());                
    });
});

Bien que cette approche nécessite davantage de définitions d'événements, elle compense en offrant facilement une gestion unique des événements par élément, un code plus lisible et une meilleure séparation des préoccupations.