Мне нужна помощь в создании прослушивателя событий на чистом JavaScript, который фиксирует все клики на странице, получает текст / URL ссылки, находит логический родительский DIV этой ссылки и объединяет значения вместе.Возьмите этот пример кода:
<body>
<div class="heading grid-12">
<!-- Header and navigation links -->
<a href="index.html">Summer Promotion</a>
</div>
<div class="responsiveGrid">
<!-- page body -->
<a href="/cart/sweaters/navy.html?promocode=123"><img alt="Navy Sweater" src="nsweater.jpg"/></a>
</div>
<div class="footer grid-12">
<!-- Footer and bottom nav links -->
<a href="javascript:void(0);" onClick="showOverlay">About Us</a>
</div>
</body>
В приведенном выше примере я хочу получить информацию о том, где логически находится ссылка на странице, либо заголовок | тело | нижний колонтитул, в зависимости от того, является ли ссылка дочерней по отношению к этим трем верхнимуровень DIVs.Далее я хочу захватить текст ссылки из ссылок привязки / JavaScript или текст Alt из ссылок изображений.Наконец, я хочу получить путь ссылки - исключая протокол, домен и строки запроса, если ссылка привязки, или преобразовать в статическую строку «Overlay», если href равен «#» или «javascript: void (0);».Используя приведенный выше код, я бы хотел, чтобы окончательная каскадная строка отправлялась в console.log при нажатии любой ссылки:
'header|Summer Promotion|index.html'
'body|Navy Sweater|/cart/sweaters/navy.html'
'footer|About Us|Overlay'
Заранее благодарен за помощь.