onmouseover 与 javascript

Question

我希望 div a 和 div b 在鼠标悬停时切换位置 div b 然后在鼠标离开时切换回来 div a。但它超级故障，即使鼠标没有离开也会切换 div a。当鼠标仍在 div a 中时，我如何将其设置为 not 运行 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>

Answer 1

使用 onmouseenter 而不是 onmouseover

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

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

Answer 2

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

你可以这样写html:

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

或使用 stoppropagation() 或 cancelBubble()

Answer 3

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

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>

onmouseover 与 javascript

onmouseover with javascript

javascript

onmouseover

onmouseout