Javascript

Question

我有几个 div 包含图像、文本和 link。它们由 class .feed-item 标识。我不想只通过单击 link 来访问后面的 link，我想让整个 div 都可以单击。

我可以通过 DIV 级别的 onclick 轻松解决这个问题，但现在我正在使用 AMP，我不能再在 DIV 中使用 onclick，所以我试图通过侦听器找到解决方案。

站点是：https://www.laurentwillen.be 关注 class：.feed-item 源代码：

<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>

我的代码：

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];
    });
}

如果我单击 DIV 边框，我会在 div 中得到完整的 HTML，我可以解析它以检索 link。如果我单击 DIV 内的任意位置（例如：在描述文本上），我只会得到 link 不可用的特定区域的 HTML。我想获取 .feed-item 中的所有 html 而不是某些子 DIVs.

您知道我如何实现这一目标吗？它必须是香草 JS。

Answer 1

我试过类似的方法。

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/

Answer 2

您可以通过为点击处理程序提供提要项的引用来解决此问题：

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;
    });
}

Answer 3

至 "make the whole div clickable"，您可以将 A 放在 DIV 上：

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

您不能在 AMP 中使用脚本。如果您开始使用 AMP，请经常在 https://validator.ampproject.org/ 尽早验证您的网页。它将帮助您摆脱 AMP 中的所有限制！

Javascript - 点击侦听器未传递所有数据

Javascript - click listener not passing all the data

onclicklistener

amp-html