JavaScript中的mouseenter和mouseleave不起作用

Question

我在JavaScript中遇到了mouseenter和mouseleave事件的问题。奇怪的是，如果你用click或dblclick事件替换这两个事件，代码就能正常工作。希望你能帮助我解决这个问题。 PS：我正在使用Chrome浏览器。 暂时不知道如何在fiddle上使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);
  };

}());

- Drew

Answer 1

您正在向window对象添加mouseleave/mouseenter处理程序。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>

- Arun P Johny

Answer 2

你可以简单地这样做

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

- RIYAJ KHAN

Answer 3

你必须进行更改

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

使用这个

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

- Rakesh Sojitra

Answer 4

你只需要使用这个

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

它的工作正常

- Shailesh Singh

---

在任何人选择推荐删除这篇文章之前，这是一个有效的尝试回答。这篇文章不应该被标记并且不应该在LQPRQ中被推荐删除。请参见：You're doing it wrong: A plea for sanity in the Low Quality Posts queue和Your answer is in another castle: when is an answer not an answer?。 - user4639281