[英]Why is mouseenter event triggered when page below is scrolled?
I noticed mouseenter
event triggered when mouse is untouched but the page below the cursor is scrolled. 我注意到当鼠标未被触摸但光标下方的页面滚动时,会触发mouseenter
事件。
Check out this fiddle: http://jsfiddle.net/F3EwW/ 看看这个小提琴: http : //jsfiddle.net/F3EwW/
Steps to reproduce: 重现步骤:
li
点击一个li
mouseenter
event getting triggered when the li
below is scrolled to the view. 当下面的li
滚动到视图时,您会注意到mouseenter
事件被触发。 Note: To notice this behavior, make sure the mouse cursor is above li
and leave it untouched. 注意:要注意此行为,请确保鼠标光标在li
上方,并且保持不变。
Initially, I accepted this as a default behavior and went on with a work around to handle this in my code.. but then I got curious and wanted to verify this behavior in any documentation which I couldn't find it anywhere. 最初,我将其作为默认行为接受,并继续进行处理以在我的代码中进行处理。.但后来我感到好奇,并想在任何我找不到的文档中验证此行为。
Does anyone know if this behavior is documented anywhere in spec or any authentic webpage? 有人知道规范或任何真实网页中的任何地方都记录了此行为吗?
I looked up w3spec event scroll and mouse event order , but couldn't locate anything about this. 我查找了w3spec事件滚动和鼠标事件顺序 ,但是找不到任何有关此的信息。
Also the spec description for mouseenter is as follows, 同样, mouseenter的规格说明如下:
A user agent must dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. 当将指针设备移动到元素或其后代元素之一的边界上时,用户代理必须调度此事件。 This event type is similar to mouseover, but differs in that it does not bubble, and must not be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements. 此事件类型与鼠标悬停类似,但不同之处在于它不会冒泡,并且当指针设备从一个元素移动到其后代元素之一的边界时,不得分派。
In Chrome, you would notice mouseover
to be triggered as well. 在Chrome中,您也会注意到mouseover
也会被触发。 I have posted a question and a bug report already on this. 我已经对此发布了一个问题和一个错误报告 。
You realize that you have $('li').mouseenter(function () {
? this caused the mouseenter event to be binded to each and every one of this li elements so when you are using the up and down key to scroll and your mouse is still inside the ul it keeps entering a new li. This was not an unintended feature the mouse in entering the new element . 您意识到自己有$('li').mouseenter(function () {
?这会导致mouseenter事件绑定到此li元素的每个元素,因此当您使用上下键滚动和鼠标仍在ul中,并不断输入新的li。这不是 鼠标输入新元素时 的意外功能 。
The behaviour you are looking for is more something like this: 您正在寻找的行为更多是这样的:
$("element").bind("mousemove mouseenter", function(event) {
//...
});
Also you need to realize the DOM understands the movement of the mouse relative to the document not where your mouse is on your screen as your OS does. 另外,您还需要认识到DOM可以理解鼠标相对于文档的移动,而不是像操作系统那样,可以理解鼠标在屏幕上的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.