Asked  7 Months ago    Answers:  5   Viewed   35 times

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

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

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.

Can someone please clarify with an example?

 Answers

76

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, mouseover is triggered, but not 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>
Tuesday, June 1, 2021
 
KHM
answered 7 Months ago
KHM
30

Assuming browser that supports the event:

  1. The real event can support any document. jQuery will only use the document it was loaded in, no matter what you pass to it.
  2. jQuery will fire the event asynchronously even if the event has already happened. Attaching 'DOMContentLoaded' event will do nothing if the event has already happened.

There is no delay in these browsers, see http://jsfiddle.net/rqTAX/3/ (the offsets logged are in milliseconds).

For browsers that don't support the event, jQuery's will obviously work for them as well. It will use a hacky mechanism that is not the same as the real DOMContentLoaded and will not necessarily fire as soon as the real DOMContentLoaded would:

// The DOM ready check for Internet Explorer
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
}
Tuesday, July 13, 2021
 
Litty
answered 5 Months ago
31

Try using the .mouseenter event instead of the .mouseover

I think that will do!

Tuesday, August 10, 2021
 
twk
answered 4 Months ago
twk
25

You can go for the jQuery watch plugin to detect changes in the attributes.

Check out this post too:

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

Tuesday, August 17, 2021
 
tuckerjt07
answered 4 Months ago
78

I just found out that this is a very logical problem. Once you start dragging the element, it sticks under your mouse pointer.. hence, it'll just hover over the current element all the time!!

A (not so pretty) fix is to set the cursorAt option so the mouse pointer is outside of the draggable element:

$('#some_id').draggable({
      cursorAt: {left: -10, top: -10}
});

It would be much nicer if there is a way to somehow pass the mouse pointer underneath the element that is being dragged, but so far I haven't found a solution for that.

Hope this helps a bit!

Thursday, October 14, 2021
 
Michal Charemza
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share