javascript中的mouseenter和mouseleave不起作用

Question

我在 javascript 中遇到了 mouseenter 和 mouseleave 事件。奇怪的是，如果您将这两个事件替换为 click 或 dblclick 事件，则代码可以正常工作。希望你能在这里帮助我。 PS：我正在使用铬。 不知道如何让 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 对象。 click 处理程序有效，因为它会冒泡到窗口对象，但 mouseenter 和 mouseleave 事件不会冒泡，因此附加到窗口对象的侦听器不会被触发

您需要将侦听器添加到框元素

(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

你就用这个

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

它的工作

Answer 4

你必须改变

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

有了这个

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