javascript中的mouseenter和mouseleave無法正常工作

Question

我在javascript中的mouseenter和mouseleave事件遇到問題。 奇怪的是，如果將這兩個事件替換為click或dblclick事件，該代碼將起作用。 希望你能在這里幫助我。 PS：我正在使用Chrome。 現在不知道如何使js在小提琴上工作...

這是代碼：

https://jsfiddle.net/frempong69/t7du0kte/

(function() {
  window.onload = function() {
    var box = document.getElementsByClassName("box")[0];

    var change = function() {
      box.style.backgroundColor = "green";
    };

    var normal = function() {
      box.style.backgroundColor = "blue";
    }

    addEventListener("click", change, false);
    addEventListener("mouseleave", normal, false);
  };

}());

Answer 1

您正在將mouseleave / mouseenter處理程序添加到window對象。 單擊處理程序起作用是因為它會冒泡到窗口對象，但是mouseenter和mouseleave事件不會冒泡，因此連接到該窗口對象的偵聽器不會被觸發

您需要將listerns添加到box元素

 (function() { window.onload = function() { var box = document.getElementsByClassName("box")[0]; var change = function() { box.style.backgroundColor = "green"; }; var normal = function() { box.style.backgroundColor = "blue"; } box.addEventListener("mouseenter", change, false); box.addEventListener("mouseleave", normal, false); }; }()); 

 .box { background-color: red; width: 400px; height: 200px; margin: 50px auto; position: relative; } .box:after { content: " "; width: 0px; height: 0px; border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid red; position: absolute; left: 100%; top: 50%; margin-top: -100px } 

 <div class="box"> </div> 

Answer 2

你可以這樣簡單地做

 box.onmouseenter = change;
 box.mouseleave = normal;

Answer 3

你必須改變

addEventListener("click", change, false);
addEventListener("mouseleave", normal, false);

有了這個

box.addEventListener("click", change, false);
box.addEventListener("mouseout", normal, false);

Answer 4

你只用這個

<div class="box" onmouseover="style.background='green'" onmouseout="style.background='red'">
</div>

是工作