Dev Faq
0
votes

Déclencher l'élément enfant lorsque le parent est cliqué

J'explique ce que je voudrais réaliser avec une image, je pense qu'il est plus facile.

Ce que je voudrais faire strong> (Cliquez pour voir l'exemple) P>

J'ai essayé cela mais ça ne marche pas p > xxx pré>

où je veux Appliquez-le FORT> (Cliquez pour voir l'exemple) P> 

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> 
              </h3>
        </header>
    </div>

</article>

2 commentaires

Votre code fonctionne bien pour moi. Si je clique sur l'image, je suis transféré à l'URL dans la balise A .

Par curiosité, pourquoi ne pas simplement utiliser HTML et envelopper l'élément entier de la balise ? Donc

3 Réponses :

0
votes

Vous pouvez utiliser [0] code> pour accéder directement à l'élément DOM, puis utilisez la norme JS .Cliquez sur () CODE>

P> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<article class="entry-tpl-grid">

  <figure class="entry-featured-media">
    <a href="#" class="g1-frame">
      <div class="g1-frame-inner">
        <img src="http://placekitten.com/150/150">
      </div>
    </a>
  </figure>


  <div class="entry-body">
    <header class="entry-header">
      <h3 class="entry-title">
        <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a>
      </h3>
    </header>
  </div>

</article>

0 commentaires
0
votes

Utilisation de chaque état d'ajout de multiples gestionnaires d'événements à chaque élément enfant, de sorte qu'il ne serait pas simplement plus facile d'ajouter le gestionnaire d'événements sur le parent et si un élément enfant est cliqué, il exécute l'événement des parents ...

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> 
              </h3>
        </header>
    </div>

</article>

0 commentaires
0
votes

Cette réponse utilise Vanilla JS:

p> 

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.google.com/" class="woocommerce-LoopProduct-link"> Product name (Google) </a> 
              </h3>
        </header>
    </div>
</article>

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.microsoft.com/" class="woocommerce-LoopProduct-link"> Product name (Microsoft)</a> 
              </h3>
        </header>
    </div>
</article>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO