代码之家 › 专栏 › 技术社区 › klewis

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

javascript

klewis · 技术社区 · 6 年前

使用ES6 arrow函数,我尝试在共享同一类名的多个锚定链接中的任意一个上应用悬停状态。但是下面的代码只在我将鼠标悬停在第一个元素上时才起作用,其余的就不行了。我从这个逻辑中遗漏了什么?

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>

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

1 回复 | 直到 6 年前

Mamun 6 年前

事件对第一个元素有效,因为

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

使用 querySelectorAll()

单元法返回一个静态(非活动)节点列表,表示与指定选择器组匹配的文档元素列表。

你可以用 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前