onmouseover with javascript

Question

我希望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>

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>