Javascript - слушатель щелчка не передает все данные - PullRequest
Новая
       10

Javascript - слушатель щелчка не передает все данные

0 голосов
/ 26 января 2019

У меня есть пара элементов, содержащих изображения, текст и ссылки.Они идентифицируются классом .feed-item.Вместо того, чтобы просто получить доступ к ссылке позади, щелкнув по ссылке, я хотел бы сделать весь div кликабельным.

Я мог бы легко решить эту проблему с помощью щелчка мышью на уровне DIV, но теперь, когда я используюAMP, мне больше не разрешено использовать onclick в DIV, поэтому я попытался найти решение с помощью слушателя.

Сайт: 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, я получу полный HTML-код внутри div и могу его проанализировать, чтобы получитьссылка на сайт.Если я щелкну где-нибудь внутри DIV (например, в тексте описания), я получу только HTML-код для этой конкретной области, где ссылка недоступна.Я хотел бы получить все html внутри элемента .feed вместо некоторых дочерних DIV.

Есть ли у вас какие-либо идеи о том, как мне этого добиться?Это должно быть ванильное JS.

Ответы [ 3 ]

0 голосов
/ 26 января 2019

Вы можете решить эту проблему, предоставив обработчику кликов ссылку на элемент фида: 

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 голосов
/ 27 января 2019

Чтобы "сделать весь div кликабельным", вы можете поместить свою букву A поверх DIV: 

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

Вы не можете использовать скрипты в AMP.Если вы начинаете в AMP, проверяйте свою страницу часто и рано на https://validator.ampproject.org/.. Это поможет вам оставаться в курсе всех ограничений AMP!

0 голосов
/ 26 января 2019

Я пробовал что-то подобное. 

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/

...