Question

我有几个包含图像，文本和链接的div。它们由.feed-item类标识。我不仅希望通过单击链接来访问后面的链接，还希望使整个div可点击。

我可以通过在DIV级别上使用onclick轻松解决此问题，但是现在我正在使用AMP，因此不再允许在DIV中使用onclick，因此我尝试通过侦听器找到解决方案。

站点为：https://www.laurentwillen.be 有关类别：.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，然后可以对其进行解析以检索链接。如果单击DIV内的任意位置（例如，描述文字上的内容），则只会得到该特定区域的HTML，而该区域没有链接。我想在.feed-item中获取所有html，而不是一些子DIV。

您对我如何实现这一目标有任何想法吗？它必须是香草JS。

Answer 1

要“使整个div可点击”，可以将A放在DIV上：

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

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

Answer 2

我已经尝试过类似的事情。

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 3

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

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

Javascript-点击监听器不传递所有数据

3 个答案: