Question

所以在阅读了最近回答的question后，我不清楚我是否真的理解mouseenter()和mouseover()之间的区别。帖子陈述

鼠标悬停（）：

进入元素时以及任何鼠标移动时都会触发发生在元素内。

的MouseEnter（）：

进入元素时会触发。

我想出了一个使用两者的fiddle，它们看起来非常相似。有人可以向我解释两者之间的区别吗？

我也尝试过阅读JQuery定义，两者都说同样的事情。

当鼠标指针进入元素
时，鼠标悬停事件将发送到元素
当鼠标指针进入元素时，mouseenter事件将发送到元素。

有人可以用一个例子来澄清吗？

Answer 1

您可以看到目标元素包含子元素时的行为：

http://jsfiddle.net/ZCWvJ/7/

每次鼠标进入或离开子元素时，都会触发mouseover，但不会mouseenter。

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

这是我发现的最好的例子之一：

的mouseenter
mouseover
mouseout
鼠标离开

http://bl.ocks.org/mbostock/5247027

Answer 3

尽管它们以相同的方式运行，但只有当鼠标指针进入所选元素时才会触发mouseenter事件。如果鼠标指针同时进入任何子元素，则会触发{strong>事件

Answer 4

请参阅jquery文档页面底部的示例代码和演示：

http://api.jquery.com/mouseenter/

...当指针移动到子元素中时，mouseover将触发好吧，只有当指针移入时，mouseenter才会触发绑定元素。

Answer 5

mouseenter 事件与鼠标悬停的区别在于鼠标悬停处理事件冒泡的方式。 mouseenter 事件，当鼠标进入鼠标时触发，触发 。请参阅：https://api.jquery.com/mouseenter/

mouseleave 事件 mouseout 与处理事件冒泡的方式不同。 mouseleave 事件，当鼠标离开元素时，触发其处理程序 。请参阅：https://api.jquery.com/mouseleave/

Answer 6

此示例演示了 mousemove ， mouseenter 和 mouseover 事件之间的区别：

https://jsfiddle.net/z8g613yd/

HTML：

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS：

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS：

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

onmousemove ：每次鼠标指针移到div元素上时都会发生。
onmouseenter ：仅在鼠标指针进入div元素时才会出现。
onmouseover ：当鼠标指针进入div元素时发生，及其子元素（p和span）。

Answer 7

旧问题，但对于有洞察力的imo仍然没有很好的最新答案。

这几天，所有浏览器都支持mouseover/mouseout和mouseenter/mouseleave。不过，jQuery不会将您的处理程序注册到mouseenter/mouseleave，而是静静地将它们放置在mouseover/mouseout周围的包装中，如以下代码所示，并对mouseenter/mouseleave做出自己的稍有不同。

事件的确切行为与“委托处理程序”尤其相关。不幸的是，jQuery对什么是委托处理程序以及事件应该接收什么有不同的解释。在another answer中显示的事实是更简单的click事件。

那么，如何正确回答有关jQuery的问题呢？jQuery使用Javascript编写事件和处理程序，但两者却有所不同，甚至在文档中都没有提及？

首先是“真实” JavaScript的区别：

- 鼠标移动得比浏览器采样位置快时，鼠标可以从外部/外部元素“跳到”内部/内部元素
- 任何enter/over得到一个相应的leave/out（可能是迟来的/跳跃的）
- 事件进入指针下方的可见元素（不可见→不能成为目标）
mouseenter/mouseleave
- 传送到注册的元素（目标）
- 每当元素或任何后代（例如通过跳转）输入/离开
- 它不会冒泡，因为从概念上讲，后代被认为是所涉及元素的一部分，即没有子代可能发生其他事件（含义是“进入/离开”父代？！）
- 孩子可能还注册了类似的处理程序，可以正确输入/离开，但与父母的输入/离开周期无关
mouseover/mouseout
- 目标是指针下方的实际元素
  - 一个目标不能是两件事：即不是同时父母和孩子
- 活动无法“嵌套”
  - 在孩子可能被“超越”之前，父母需要“离开”
- 会冒泡，因为target / relatedTarget指示事件发生的地方

经过一些测试，结果表明，只要您不使用jQuery“具有选择器注册的委托处理程序”，该模拟都是不必要的，但很合理：它过滤掉mouseover/mouseout个事件，这些事件mouseenter/mouseleave不会得到。但是目标很混乱。真实的mouseenter/mouseleave将把handler元素作为目标，仿真可能会指示该元素的子元素，即mouseover/mouseout所携带的内容。

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>

Jquery mouseenter（）vs mouseover（）

7 个答案: