使用 javascript 鼠标悬停答案

【问题标题】：onmouseover with javascript使用 javascript 鼠标悬停
【发布时间】：2017-10-02 01:13:15
【问题描述】：

我希望 div a 和 div b 在鼠标悬停时切换位置 div b 然后在鼠标离开时切换回来 div a。但它超级小故障，即使鼠标没有离开div a也会切换。当鼠标仍在div a 中时，我如何使其不运行navMouseOut，以及为什么要这样做。（请测试代码看看有什么问题）

document.getElementById("b").onmouseover = function() {
  navMouseOver()
};
document.getElementById("a").onmouseout = function() {
  navMouseOut()
};

function navMouseOver() {
  document.getElementById("a").style = ("top: 50%;");
  document.getElementById("b").style = ("top: 40%; ");
}

function navMouseOut() {
  document.getElementById("a").style = ("top: 40%;");
  document.getElementById("b").style = ("top: 50%;");
}

#a {
  position: fixed;
  top: 40%;
  left: 20%;
  background-color: red;
}

#b {
  position: fixed;
  top: 50%;
  left: 20%;
  background-color: lightblue;
}

<div id="a">
  <p>content a</p>
</div>
<div id="b">
  <p>content b...</p>
</div>

【问题讨论】：

顺便说一句，您不需要匿名函数来包装对其他函数的调用，只需说 document.getElementById("b").onmouseover = navMouseOver;。

标签： javascript onmouseover onmouseout

【解决方案1】：

问题在于，当元素切换位置时，mouseover 和 mouseenter 事件作为新定位在鼠标上的元素被触发。为了防止这种情况，您可以使用一个将 true 切换为 false 的标志来决定是否运行重新定位代码。

var target1 = document.getElementById("mouseoverTarget1");
var switching = false;
var inStartingPosition = true;

target1.addEventListener("mouseover", function() {
  if (!switching) {
    switching = true;
    target1.style.top = inStartingPosition ? "50px" : "0px";
    target2.style.top = inStartingPosition ? "-50px" : "0px";
    inStartingPosition = inStartingPosition ? false : true;
    console.log("mouseover target 1");
    setTimeout(() => {
      switching = false;
    }, 100);
  }
});

var target2 = document.getElementById("mouseoverTarget2");

target2.addEventListener("mouseover", function() {
  if (!switching) {
    switching = true;
    target1.style.top = inStartingPosition ? "50px" : "0px";
    target2.style.top = inStartingPosition ? "-50px" : "0px";
    inStartingPosition = inStartingPosition ? false : true;
    console.log("mouseover target 2");
    setTimeout(() => {
      switching = false;
    }, 100);
  }
});

#mouseoverTarget1, #mouseoverTarget2 {
  width: 50px;
  height: 50px;
  position: relative;
}

#mouseoverTarget1 {
  background-color: red;
}

#mouseoverTarget2 {
  background-color: blue;
}

<div id="mouseoverTarget1"></div>
<div id="mouseoverTarget2"></div>

【讨论】：

“鼠标悬停在元素上时，mouseover 事件会反复触发。” - 只有在它冒泡时才会发生这种情况，因此如果鼠标移到元素的上方，它会再次触发孩子们。仅仅停留在一个元素上不会导致它重复触发。但是，是的，mouseenter 不会冒泡。

【解决方案2】：

使用 onmouseenter 代替 onmouseover

document.getElementById("b").onmouseenter = function() {
navMouseOver()
};

document.getElementById("a").onmouseout = function() {
navMouseOut()
};

【讨论】：

这是一个展示如何做到这一点的小提琴：jsfiddle.net/8ohoe1dm
如果您添加解释，此答案会更有帮助。

【解决方案3】：

我认为问题在于传播，让我们看看这个函数onmouseout，即使你将鼠标离开P元素但仍在DIV中，onmouseout仍然会执行。

你可以这样写html：

<div id="a">
  content a
</div>
<div id="b">
  content b...
</div>

或使用 stoppropagation() 或 cancelBubble()

【讨论】：