J'ai quelques divs contenant des images, du texte et des liens. Ils sont identifiés par la classe .feed-item. Au lieu d'accéder uniquement au lien derrière en cliquant sur le lien, je voudrais rendre la div entière cliquable.

Je pouvais résoudre cela facilement avec un onclick au niveau de la DIV, mais maintenant que j'utilise AMP, je ne suis plus autorisé à utiliser onclick dans les DIV, j'ai donc essayé de trouver une solution avec un auditeur.

Le site est: https://www.laurentwillen.be Classe concernée: .feed-item Code source:

<div class="feed-item page-1" data-page="1" >
    <div class="feed-image"><amp-img class="amp_img" src="www.laurentwillen.be/pixel.gif"  width="160px" height="50px"  sizes="calc(20vw - )" srcset="https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-300x94.jpg 300w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-768x240.jpg 768w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-1024x319.jpg 1024w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-1400x437.jpg 1400w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-900x281.jpg 900w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-700x218.jpg 700w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-500x156.jpg 500w" alt="avis-review-aliexpress"></amp-img></div><div class="feed-category">Expérience d'achat</div>
    <div class="feed-text">
        <div class="feed-title">Mon avis complet sur Aliexpress.com</div>
        <div class="feed-link"><a href="https://www.laurentwillen.be/experience-dachat/mon-avis-complet-sur-aliexpress-com/">Mon avis complet sur Aliexpress.com</a></div>
        <div class="feed-description">J'ai acheté plus de 90 produits sur Aliexpress et je partage mes bonnes et mauvaises expériences pour vous aider à choisir.</div>
    </div>

Mon code:

feed_item = document.getElementsByClassName('feed-item');
for (a=0;a<feed_item.length;a++)
{
        feed_item[a].addEventListener("click", function(e){
        console.log(e.target.innerHTML);
        parser = new DOMParser();
        var local_html = parser.parseFromString(e.target.innerHTML, "text/html");
        link = local_html.querySelectorAll('div.feed-link a');
        console.log(link[0]);
        //document.location = link[0];
    });
}

Si je clique sur la bordure DIV, j'obtiens le code HTML complet à l'intérieur du div et je peux l'analyser pour récupérer le lien. Si je clique n'importe où à l'intérieur du DIV (ex: sur le texte de description), j'obtiens seulement le HTML pour cette zone spécifique où le lien n'est pas disponible. Je voudrais obtenir tout le code HTML à l'intérieur de .feed-item au lieu de certains DIV enfant.

Avez-vous une idée de comment je pourrais y parvenir? Ce doit être de la vanille JS.

1
Laurent 26 janv. 2019 à 16:19

3 réponses

Meilleure réponse

J'ai essayé quelque chose comme ça.

var elements = document.getElementsByClassName("feed-item");

var myFunction = function() {
    let link = this.querySelector('.feed-link a').getAttribute("href");     
    window.location.href = link;
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

https://jsfiddle.net/xh5pe394/

0
Thibaut 26 janv. 2019 à 15:49

Pour "rendre la div entière cliquable", vous pouvez mettre votre A sur votre DIV:

<a href=...>
    <div class="feed-item ...>

Vous ne pouvez pas utiliser de scripts dans AMP. Si vous commencez dans AMP, validez votre page souvent et tôt à https://validator.ampproject.org/. Cela vous aidera à garder le cap de toutes les restrictions d'AMP!

1
user2468968 27 janv. 2019 à 18:37

Vous pouvez le résoudre en fournissant au gestionnaire de clics une référence à l'élément de flux:

var feed_items = document.getElementsByClassName('feed-item');
for (a=0;a<feed_items.length;a++)
{
    var feed_item = feed_items[a];
    feed_item.addEventListener("click", function() {
        var link = feed_item.querySelector('div.feed-link a');
        document.location = link.href;
    });
}
0
Ovenwand 26 janv. 2019 à 15:41