时间戳

首页 > 解决方案 > 如何使用 onmouseover 和 onmouseout 对多个元素应用事件处理

javascript - 如何使用 onmouseover 和 onmouseout 对多个元素应用事件处理

问题描述

使用 ES6 箭头函数，我试图在共享相同类名的多个锚链接中的任何一个上应用悬停状态。但是以下仅当我将鼠标悬停在第一个元素上时才有效，而其余部分则无效。我从这个逻辑中遗漏了什么？

的HTML：

 <nav id="demo-links">
   <a href="/" class="mlink">Link A</a>
   <a href="/" class="mlink">Link B</a>
   <a href="/" class="mlink">Link C</a>
   <a href="/" class="mlink">Link D</a>
 </nav>

JavaScript：

let mItem = document.querySelector(".mlink");
mItem.onmouseover = () => mItem.setAttribute("target", "_blank");
mItem.onmouseout = () => mItem.removeAttribute("target");

标签： javascript

解决方案

该事件适用于第一个元素，因为

Document 方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

改为使用querySelectorAll()。

Element 方法querySelectorAll()返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

您可以使用forEach()循环所有的li来单独设置事件：

let mItem = document.querySelectorAll(".mlink");
mItem.forEach(function(el){
  el.onmouseover = () => el.setAttribute("target", "_blank");
  el.onmouseout = () => el.removeAttribute("target");
});
<nav id="demo-links">
   <a href="/" class="mlink">Link A</a>
   <a href="/" class="mlink">Link B</a>
   <a href="/" class="mlink">Link C</a>
   <a href="/" class="mlink">Link D</a>
</nav>

推荐阅读