Question

如果我使用与mouseenter / mouseout事件相同的类循环遍历不同的元素，并且我试图合并＆＃39;这个＆＃39;关键字，因此JS仅在我悬停的元素上触发。我不能让它工作。

我已经剥夺了我尝试使用这个＆＃39;这个＆＃39;用于使代码更易于阅读的关键字。我如何去做它，只有悬停在上面的元素有mouseenter，然后在循环遍历元素时应用mouseout事件？

我无法使用jQuery解决方案。

codepen pen：https://codepen.io/emilychews/pen/mMEEBw

代码如下：

JS

// declare variable for the CSS class
var menuItem = document.querySelectorAll('.menu-item');

//loop through CSS class to change background to red
function myMouseEnter() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "red";
  }
}

//loop through CSS class to change remove red background
function myMouseLeave() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "none";
  }
}

//event handler to add function on mouseenter
for (j = 0; j < menuItem.length; j++) {
menuItem[j].addEventListener('mouseenter', myMouseEnter, false)
}

//event handler to add function on mouseout
for (k = 0; k < menuItem.length; k++) { menuItem[k].addEventListener('mouseout', myMouseLeave, false)
}

CSS

.menu-item {padding: 10px;
font-family: arial;
}

HTML

<ul class="unclick--menuitems">
  <li class="menu-item"><a href="//google.com">About</a></li>
  <li class="menu-item"><a href="//google.com">Projects</a</li>
  <li class="menu-item"><a href="//google.com">Contact</a></li>
</ul>

Answer 1

在您的两个功能中，您需要做的就是参考this。在这种情况下，this是指您当前正在悬停的.menu-item事件。

请注意，您可能还想为<a>标记子项附加处理程序，否则只要您将鼠标悬停在这些标记上，脚本就会认为您离开 { {1}}，并尝试更改颜色。

这可以通过查看相关事件的 toElement 和 relatedTarget 来完成，然后检查这些是否为父{ {1}}元素。

总而言之，您的代码将如下所示：

<li>

<li>

// declare variable for the CSS class
var menuItem = document.querySelectorAll('.menu-item');

// loop through CSS class to change background to red
function myMouseEnter() {
  this.style.background = "red";
}

// loop through CSS class to change remove red background
function myMouseLeave() {
  // prevent the 'mouseout' from affecting the <a> children
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  this.style.background = "none";
}

// event handler to add function on mouseenter
for (j = 0; j < menuItem.length; j++) {
  menuItem[j].addEventListener('mouseenter', myMouseEnter, false);
}

// event handler to add function on mouseout
for (k = 0; k < menuItem.length; k++) {
  menuItem[k].addEventListener('mouseout', myMouseLeave, false);
}

请注意，函数本身不必再次遍历菜单项;）

希望这有帮助！：）

参考个人类元素＆＃39; this＆＃39;

1 个答案: