javascript - What is the difference between the mouseover and mouseenter events? - Stack Overflow

admin管理员组

文章数量:1134248

I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.

Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).

I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.

Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).

• javascript
• jquery
• events
• jquery-events

Share Improve this question Follow edited Dec 31, 2020 at 17:30 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Jul 9, 2009 at 14:45 TomTom 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 135

You can try out the following example from the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from outside this element to this element.

Or as the mouseover() docs put it:

[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

Mouseenter and mouseleave do not react to event bubbling, while mouseover and mouseout do.

Here's an article that describes the behavior.

As is often true with questions like these, Quirksmode has the best answer.

I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Edit: thanks to other posts, I now see this is not the case

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });

本文标签： javascriptWhat is the difference between the mouseover and mouseenter eventsStack Overflow