mouseenter event called twice even after stopPropagation

Question

I'm new to jquery and am facing now a weird problem. I succeeded to narrow it down to the fact that a mouseenter event is called twice: once for the containing div (this was my intention) and again for elements within this div (not good). I tried to use 'return false' and 'stopPropagation' but it doesn't seem to work. here's the code:

<!-- JS files (order matters!) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>


<script type="text/javascript">
$(function (){
    $(".testDiv").hover(
    function(e) /* IN */ {
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
        e.stopPropagation();
        return false;
    }, function(e) /* OUT */ {
        $(this).html($(this).data("htmlBackup"));
        e.stopPropagation();
        return false;
    });
});         
</script>

<!-- this one works -->
<div class="testDiv" style="border: solid">ORIG HTML</div>

<br /> <br /> <br />

<!-- this doesn't work -->
<div class="testDiv" style="border: solid"> <p style="border: solid">ORIG HTML</p></div>

you can also see it here: http://jsfiddle.net/rFqyP/3/

Any help will be very much appreciated!

Answer 1

You can keep the code from getting stuck by using a flag, so that you can detect when you get double mouseenter events:

$(function(){

  var inside = false;

  $(".testDiv").hover(
    function(e) /* IN */ {
      if (!inside) {
        inside = true;
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
      }
    }, function(e) /* OUT */ {
      inside = false;
      $(this).html($(this).data("htmlBackup"));
    }
  );

});

http://jsfiddle.net/rFqyP/16/

This will however not solve the problem with the size difference. When you leave the element by moving out by the bottom border, it grows and causes a mouseenter event, which again changes the size so that the mouse is outside but without causing a mouseleave event, leaving the element looking like the mouse is still hovering it.

Remving the border from the p elements solves the problem completely, without a need for a flag, as it's the border that is causing the size difference.

Answer 2

What's happening is that the mouseenter event is firing twice in a row (you can test this easily with some console.log calls). This is problematic since is will change the html of the element (and make it just the "test" string), and then on the second consecutive run it will take the html and save it to the element's data. But since there was no mouseleave event fired, as mentioned, the html is the "test" string, so now it saves that to the element data.

After that, the mouseenter and mouseleave events continue to fire just fine, but both the element's html and its data have the same "test" string, so it doesn't change.

The reason the mouseenter fires twice consecutively is because of the borders. The div's dimensions change and so the following series of events takes place:

1. mouseenter (div becomes thinner)
2. mouseleave (div becomes thicker which will cause an almost automatic mouseenter)
3. mouseenter as mentioned in 2 because even though the mouse left the div, the div expanded, and so the mouse entered. But since mouseenter fired, the div went to the "test" string, and became thinner, so now the mouse is beyond the boundaries of the div, but without firing a mouseleave.
4. Next time I mouseover the div, mouseenter will fire again <== this is twice in a row

You can see this happening, if for example you enter with your mouse slowly some of the above events don't happen and it will actually work as expected.

As an aside, I don't think it's the best idea to be swapping html contents. If you want to toggle things, I suggest hide() and show(). Firstly, that saves event handlers, and it makes more intuitive sense. You're interested in hiding things, not serialising and saving.

Answer 3

i think that the second one does'nt work because the html is different. If you use the same html you don't need stopPropagation or return false at all. Look at the fiddle: http://jsfiddle.net/aC3TG/1/

$(function (){
    $(".testDiv").hover(
    function(e) /* IN */ {
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
    }, function(e) /* OUT */ {
        $(this).html($(this).data("htmlBackup"));

    });
});         

Answer 4

The issue (after debugging) I see is. You have div and p inside it so...

When you mouse over the div having p, first the div "mouseover" event is being fired which stores the whole html including p tag.

But before writing this html back to the div the "p" mouseover is fired which replaces your data with the text and not the html.

And then your text is being written out to the div finally.