Проверьте, когда курсор находится над ссылкой (в частности, ссылка на YouTube)

Question

Я хочу отобразить ссылку в консоли, когда курсор мыши находится над ссылкой (в данном случае ссылка на YouTube). Прямо сейчас вот что у меня есть.

window.onload = () => {
    var links = document.querySelectorAll('[href*="https://www.youtube.com/watch?v="],[href*="https://youtu.be/"]'); //This will selecet an element with a href that has a link that involve either https://youtu.be/ or https://www.youtube.com/watch?v= in the link (Meaning YouTube video links)
    links.forEach(link => {
        link.addEventListener("mouseenter", () => {
            console.log(`Link: ${link} hovered over.`)
        });
    });
}

Как работает этот код, когда сайт запускается или перезагружается, он будет проверять любой элемент, имеющий ссылку, со ссылкой, которая имеет либо https://www.youtube.com/watch?v= или https://youtu.be/ в основном видео на YouTube , а затем сохраните эти ссылки, когда одну из них я наведу, скажет, какая. Это работает нормально, но у меня есть один недостаток: новые ссылки, которые добавляются после того, как сайт уже запущен или перезагружен, не будут учитываться, и поэтому, когда я наведу на них курсор мыши, ссылки не будут отображаться. ссылаясь на комментарии; Например, если я сделаю комментарий, содержащий ссылку на видео, после того, как я оставлю комментарии и наведу курсор мыши на ссылку, которую я разместил, ссылка не будет отображаться. Я мог бы сделать функцию, которая перезагружается каждые 5 секунд, но это не очень хорошая идея. Plkus, над чем я на самом деле работаю, каждый раз переписывать не будет хорошо. В любом случае делать это? И я прошу прощения за длинную историю. :)

Answer 1

Вместо добавления списка событий к каждой ссылке, вы можете добавить его к родительскому элементу, который, как вы знаете, будет содержать все ссылки. Событие будет передано (делегировано), и вы сможете узнать, какая ссылка была указана в event.relatedTarget.

. Вам нужно использовать событие mouseover вместо mouseenter, чтобы получить дочерние элементы. Кроме того, чем шире net, тем выше производительность. Поэтому делегируйте событие ближайшему предку, которого вы можете.

Отредактировано для запуска сценария, когда мышь входит в ссылку.

const container = document.querySelector('.container')

container.addEventListener('mouseover', ev => {
  const target = ev.relatedTarget
  if (target && target.tagName === 'A') {
    alert(
      `Link: ${target.getAttribute('href')} hovered over.`)
  }
})

const otherContainer = document.querySelector('.other-container')

otherContainer.addEventListener('mouseover', ev => {
  const target = ev.path[0]
  if (target && target.tagName === 'A') {
    alert(
      `Now it targets when entering ${target.getAttribute('href')}.`)
  }
})

<div class="container">
  <a href="http://example.com" target="_blank">runs when mouse leaves</a>
</div>

<div class="other-container">
  <a href="http://example.com" target="_blank">runs when mouse enters</a>
</div>

Answer 2

Подход, который вы можете использовать, заключается в том, чтобы прикрепить прослушиватель событий к самому документу и проверить event.target, чтобы убедиться, что он соответствует искателю, который вы ищете.

document.addEventListener('mouseover', (e) => {
    if(e.target.closest('[href*="https://www.youtube.com/watch?v="],[href*="https://youtu.be/"]') !== null) {
        console.log(e.target)
    }
})

Вам может понадобиться заполнить Element.closest в некоторых старых браузерах