Jquery mouseenter() 与 mouseover()

Question

提问by aziz punjani

So after reading a recently answered questioni am unclear if i really understand the difference between the mouseenter()and mouseover(). The post states

所以阅读最近回答后，问题我很清楚，如果我真的明白之间的差别mouseenter()和mouseover()。帖子说

MouseOver():

鼠标移到（）：

Will fire upon entering an element and whenever any mouse movements occur within the element.

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

MouseEnter():

鼠标输入（）：

Will fire upon entering an element.

进入元素时会触发。

I came up with a fiddlethat uses both and they seem to be quite similar. Can someone please explain to me the difference between the two ?

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

I have also tried reading the JQuery definitions, both say the same thing.

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

The mouseover event is sent to an element when the mouse pointer enters the element
The mouseenter event is sent to an element when the mouse pointer enters the element.

当鼠标指针进入元素时，向元素发送 mouseover 事件
当鼠标指针进入元素时， mouseenter 事件被发送到元素。

Can someone please clarify with an example?

有人可以举例说明吗？

Answer 1

回答by gilly3

You see the behavior when your target element contains child elements:

当目标元素包含子元素时，您会看到行为：

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

Each time your mouse enters or leaves a child element, mouseoveris triggered, but not mouseenter.

每次鼠标进入或离开子元素时，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

回答by Christopher

This is one of the best examples I have found of:

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

mouseenter
mouseover
mouseout
mouseleave

鼠标输入
鼠标移到
鼠标移出
鼠标离开

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

Answer 3

回答by ErickBest

Though they operate the same way, however, the mouseenterevent only triggers when the mouse pointer enters the selected element. The mouseoverevent is triggered if a mouse pointer enters any child elements as well.

尽管它们的操作方式相同，但是mouseenter只有在鼠标指针进入所选元素时才会触发该事件。如果鼠标指针也进入任何子元素，mouseover则触发该事件。

Answer 4

回答by Willem

See the example code and demo at the bottom of the jquery documentation page:

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

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

... mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

... mouseover 在指针移动到子元素时触发，而 mouseenter 仅在指针移动到绑定元素时触发。

Answer 5

回答by user2330678

The mouseenterevent differsfrom mouseoverin the way it handles event bubbling. The mouseenterevent, only triggersits handler when the mouse enters the elementit is bound to, not a descendant. Refer: https://api.jquery.com/mouseenter/

该的mouseenter事件不同，从鼠标悬停在它的方式处理事件冒泡。所述的mouseenter事件，仅触发当其处理程序鼠标进入元件它被绑定到，不后代。参考：https: //api.jquery.com/mouseenter/

The mouseleaveevent differsfrom mouseoutin the way it handles event bubbling. The mouseleaveevent, only triggersits handler when the mouse leaves the elementit is bound to, not a descendant. Refer: https://api.jquery.com/mouseleave/

该鼠标离开事件不同，从鼠标移出它的方式处理事件冒泡。该鼠标离开事件，只有触发时，其处理程序鼠标离开元素势必会，不是一个后代。参考：https: //api.jquery.com/mouseleave/

Answer 6

回答by Mourad El Aomari

This example demonstrates the difference between the mousemove, mouseenterand mouseoverevents:

这个例子演示了mousemove、mouseenter和mouseover事件之间的区别：

https://jsfiddle.net/z8g613yd/

HTML:

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:

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:

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: occurs every time the mouse pointer is moved over the div element.
onmouseenter: only occurs when the mouse pointer enters the div element.
onmouseover: occurs when the mouse pointer enters the div element, and its child elements (p and span).

onmousemove: 每次鼠标指针移动到 div 元素上时发生。
onmouseenter: 仅在鼠标指针进入 div 元素时发生。
onmouseover: 当鼠标指针进入 div 元素及其子元素（p 和 span）时发生。

Answer 7

回答by Robert Siemer

Old question, but still no good up-to-date answer with insight imo.

老问题，但仍然没有洞察力的最新答案。

These days, all browsers support mouseover/mouseoutand mouseenter/mouseleave. Nevertheless, jQuery does not register your handler to mouseenter/mouseleave, but silently puts them on a wrappers around mouseover/mouseoutas the following code shows and makes its own slightly different interpretation of mouseenter/mouseleave.

如今，所有浏览器都支持mouseover/mouseout和mouseenter/mouseleave. 尽管如此，jQuery 不会将您的处理程序注册到mouseenter/mouseleave，而是默默地将它们放在包装器上，mouseover/mouseout如下面的代码所示，并对mouseenter/mouseleave.

The exact behavior of events is especially relevant on “delegate handlers”. Unfortunately, jQuery also has its own different interpretation of what delegate handlers are and what they should receive for events. That fact is shown in another answerfor the simpler click event.

事件的确切行为与“委托处理程序”尤其相关。不幸的是，jQuery 对委托处理程序是什么以及它们应该为事件接收什么也有自己不同的解释。这个事实显示在更简单的点击事件的另一个答案中。

So how to properly answer a question about jQuery, which uses Javascript wording for events and handlers, but makes both different and does not even mention that in its documentation?

那么如何正确回答关于 jQuery 的问题，它使用 Javascript 措辞来表示事件和处理程序，但两者都不同，甚至在其文档中都没有提到这一点？

First the differences in “real” Javascript:

首先是“真实”Javascript 的差异：

both
- the mouse can “jump” from outside/outer elements to inner/innermost elements when moved faster than the browser samples its position
- any enter/overgets a corresponding leave/out(possibly late/jumpy)
- events go to the visible element below the pointer (invisible → can't be target)
mouseenter/mouseleave
- is delivered to the element where registered(target)
- whenever the element or any descendant(e.g. by jumping) is entered/left
- it can't bubble, because conceptually the descendants are considered part of the element in question, i.e. there are no children where another event could come from (with the meaning of “entered/left” the parent?!)
- children might also have similar handlers registered, which enter/leave correctly, but unrelated to the parental enter/leave cycle
mouseover/mouseout
- the target is the actual element below the pointer
  - a target can't be two things: i.e. not parent and child at the same time
- the event can't “nest”
  - before a child could be “overed”, the parent needs to get “out”
- can bubble, because target/relatedTarget indicate where the event occurred

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

After some testing, it shows that as long as you don't use jQuery “delegate handlers with selector registration”, the emulation is unnecessary but reasonable: It filters out mouseover/mouseoutevents that a mouseenter/mouseleavewould not get. The target is messed, though. The real mouseenter/mouseleavewould give the handler element as target, the emulation might indicate children of that element, i.e. whatever the mouseover/mouseoutcarried.

经过一些测试，它表明只要您不使用jQuery“具有选择器注册的委托处理程序”，模拟是不必要的但合理的：它过滤掉mouseover/mouseoutamouseenter/mouseleave不会得到的事件。然而，目标是混乱的。真实mouseenter/mouseleave将把处理程序元素作为目标，仿真可能指示该元素的子元素，即无论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() 与 mouseover()

提问by aziz punjani

回答by gilly3

回答by Christopher

回答by ErickBest

回答by Willem

回答by user2330678

回答by Mourad El Aomari

回答by Robert Siemer

相关推荐

最近更新

标签

Jquery mouseenter() 与 mouseover()

提问by aziz punjani

回答by gilly3

回答by Christopher

回答by ErickBest

回答by Willem

回答by user2330678

回答by Mourad El Aomari

回答by Robert Siemer

相关推荐

如何以编程方式切换到新的 jQuery UI 选项卡？

jquery SPGetCurrentUser() 在 sharepoint 2007 中获取当前登录的用户名

bootstrap jquery show.bs.modal 事件不会触发

jquery：如果 ul 为空

相关推荐

最近更新

标签