Home/ Questions/Q 6202309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:42:37+00:00

I’m new to jQuery and am facing now a weird problem. I succeeded to

  • 0

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:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>


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

</body>
</html>

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

Any help will be very much appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0