简体   繁体   中英

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.

Check out this fiddle: http://jsfiddle.net/F3EwW/

Steps to reproduce:

  1. Click on a 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.

Note: To notice this behavior, make sure the mouse cursor is above li and leave it untouched.

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.

Also the spec description for mouseenter is as follows,

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM