Прикрепить функцию onmouseover() к каждому href во всех тегах привязки ‹a›, если теги привязки имеют дочерние элементы ‹img›?

HTML-код:

<p><div>
<a href="https://www.digi.com.my/chat-with-us">
<img src="">
</a></p><div>

<p><a href="https://unifi.com.my/support/contact-us"><img src="">
    </a></p>
  </div>

<p><a>Hey Man 
</a>
</p>

<div>
<p><a href="https://unifi.com.my/support/contact-us">Hey man
</a>
</p></div>

Javascript-код:

let tar = document.querySelectorAll("a[href] > img[src]");

tar.forEach(tarG => {
tarG.addEventListener("mouseover", e => {
    const ahref = e.target.a[href];
  if (a[href]) location.assign(a[href]);
   });
});

Во-первых, я хочу прикрепить функцию onmouseover() ко всем ссылкам href во всех тегах привязки с дочерними тегами на HTML-странице.

Мое намерение состоит в том, чтобы функция onmouseover() активировала href только тогда, когда курсор мыши перемещается по тегу привязки, содержащему дочерний тег img. В противном случае, если нет дочернего тега img, функция onmouseover() не активирует ссылку href.

Где мой код пошёл не так? Спасибо за все полезные ответы


addeventlistener anchor href onmouseover queryselector
person Manuel Roads    schedule 20.06.2021    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Замените свой код JavaScrip следующим:

const tars = document.querySelectorAll('a > img');

tars.forEach(tar => {
  const a = tar.parentNode;

  a.addEventListener('mouseover', /* Your mouseover handler goes here */);
});
person Corey    schedule 22.06.2021
comment
Ваш обработчик наведения мыши находится здесь Могу ли я увидеть этот код, пожалуйста? - person Manuel Roads; 23.06.2021
comment
Я понятия не имею, что вы пытаетесь сделать при наведении курсора мыши. Вы покажите мне! - person Corey; 23.06.2021
comment
Я хочу иметь возможность активировать эти теги привязки с дочерними элементами img. Моя функция onmouseover: ("mouseover", , e => { const a = e.target.a; if (a) location.assign(a); }); }); - person Manuel Roads; 23.06.2021
comment
Вот что я говорю: мы понятия не имеем, что означает активировать эти теги привязки с дочерними элементами img. Кроме того, вы используете идентификатор location, не показывая и не сообщая нам, что это такое. Вы, вероятно, заинтересованы в e.target.href. - person Corey; 23.06.2021

arrow_upward
-1
arrow_downward 

const tars = document.querySelectorAll("a > img"); 
tars.forEach(tar => {                                                                                   
const a = tar.parentNode;`   

a.addEventListener("mouseover", e => {
    const ahref = e.target.tar;
   if (tar) location.assign(tar);     
   });
  });

вот так, @Кори?

person Manuel Roads    schedule 22.06.2021

arrow_upward
-1
arrow_downward

извините за расплывчатый ответ. в своем коде вы добавляете прослушиватель событий в img. вам нужно получить родительский узел tar, а затем добавить к нему прослушиватель событий.

//js
x = [].slice
    .call(document.querySelectorAll("img"))
    .filter((e) => e.parentNode.tagName == "A")
    .map((e) => e.parentNode);
console.log(x);
//jquery
y = $("a img").parent();
console.log(y.toArray());

//you can now add eventlisteners to x,y

person Yami    schedule 22.06.2021
comment
Спасибо за ответ. Означает ли это, что я полностью заменяю свой код вашим или добавляю ваш код к своему? - person Manuel Roads; 22.06.2021
comment
извините за расплывчатый ответ. в своем коде вы добавляете прослушиватель событий в img. вам нужно получить родительский узел tar, а затем добавить к нему прослушиватель событий - person Yami; 23.06.2021