1
votes

Comment obtenir l'élément actuel lors de l'événement sur l'enfant?

J'ai un écouteur d'événement sur l'élément enfant mais je souhaite obtenir l'élément actuel.

Exemple de code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <img src="video_1.png" />
  <span>Video 1</span>
</div>

<div class="video">
 <img src="video_2.png" />
 <span>Video 2</span>
</div>

$(".video").on("click", "img", function(e) {
  console.log(this);
  console.log(e.currentTarget);
});

Dans cet exemple, je veux obtenir l'élément .video , pas img . Quelle est la meilleure façon de le faire?

Je connais $ (this) .parent () et $ (this) .closest (". Video") code>, mais je cherche un meilleur moyen. La situation réelle n'est pas seulement celle d'un parent et la recherche la plus proche coûtera du temps.

javascript jquery

1 commentaires

Double possible de Obtention de l'élément racine qui un événement délégué est lié à - jQuery

3 Réponses :

3
votes

Pour ce faire, vous pouvez utiliser la propriété delegateTarget de l'événement:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <img src="video_1.png" />
  <span>Video 1</span>
</div>

<div class="video">
  <img src="video_2.png" />
  <span>Video 2</span>
</div>

$(".video").on("click", "img", function(e) {
  console.log(this);
  console.log(e.delegateTarget);
});

1 commentaires

Impressionnant! C'est la réponse que je veux.

0
votes

Utiliser les parents ([selector]);

$(this).parents(".video")

0 commentaires

0
votes

En plus des réponses ci-dessus, on peut également utiliser la méthode "la plus proche"

$(".video").on("click", "img", function(e) {    
  console.log( $(this).closest('.video') )
})

0 commentaires