What is the difference between the mouseover and m

问题:

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).

回答1:

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.

回答2:

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

Here\'s an article that describes the behavior.

回答3:

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

回答4:

$(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);})
 });

回答5:

Explains it pretty well here

回答6:

Only Chrome let you suggest a name to use when clicking a link with dynamically generated content. However, you can generate the content when the mouse cursor is over the link and put it as DATAURI in a standard static href. This enables the \"Save link as..\" option in right-click menu.

function download_content(a, side) 
{
    a.innerHTML = \"preparing content..\";

    var txt = \"call a function to generate content\";
    var datauri = \"data:plain/text;charset=UTF-8,\" + encodeURIComponent(txt);
    a.setAttribute(\'download\', \"chrome_let_you_suggest_a_name.txt\");
    a.setAttribute(\'href\', datauri);

    a.innerHTML = \"content ready.\";
}
document.getElementById(\'my_a_link\').addEventListener(\'mouseover\', function() { download_content(this); });

<a id=\"my_a_link\" href=\"#\">save document</a>