简体   繁体   English

滚动下面的页面时,为什么会触发mouseenter事件?

[英]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: 重现步骤:

  1. Click on a li 点击一个li
  2. Use up/down arrow keys to scroll the items 使用向上/向下箭头键滚动项目
  3. You would notice the 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.

相关问题 调整窗口大小时,Chrome中触发了Mouseenter事件 - Mouseenter event triggered in chrome when resizing window mouseenter事件中滚动元素的pageY? - pageY of scrolled element from mouseenter event? 当页面滚动到末尾时,停留在内容下方的粘滞按钮 - Sticky button that stay below the content when the page is scrolled to the end 为什么 Firefox 在页面加载时触发 mouseenter 事件? - Why does Firefox fire a mouseenter event on page load? 为什么jQuery mouseenter事件以未指定的顺序触发? - Why are jQuery mouseenter events triggered in an unspecified order? 如果页面已向下滚动200px,则需要触发事件(jQuery) - need an event triggered if the page has scrolled 200px down (jQuery) 什么时候在 HTML 页面中触发 Javascript 事件循环? - When is the Javascript event loop triggered in a HTML page? 当页面滚动到底部时,JavaScript scroll() 事件无限循环 - JavaScript scroll() event endless loop when page scrolled to the bottom 为什么单击div时触发聚焦事件 - Why is focusout event triggered when clicking on div 为什么当我单击页面时,浏览器的确认框(由beforeunload事件处理程序触发)才出现? - Why the browsers confirm box (triggered by beforeunload event handler) only appears when I click onto the page?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM