Why is my events only working on internet explorer 9 and why is my mouse enter/leave events not fully working?

Why is my events only working on internet explorer 9 and why is my mouse enter/leave events not fully working?

I have a page of events here with two boxes a red and yellow box.  The red box shows the events i.e. the x coordinates, when the mouse is clicked and double clicked.  It also says mouse enter when the mouse enters the yellow box and is supposed to say mouse leave when it leaves.  None of this works with chrome and I don't know why half works with firefox and all of it works with I.E 9.  Another problem is the mouse enter only shows the pixel it hits the yellow box then goes back to showing x coordinates.  Mouse leave doesnt work. Is this a problem with event bubbling?

  1. $(document).ready(function() {
  2.   
  3.   $('#my_box').mouseenter(function() {<!-- my box is yellow div box where mouse enter occurs-->
  4.            $('#event_info_display').empty();<!-- emptys the red box which displays text about event-->
  5.            $('#event_info_display').append("Mouse Enter! ");<!--appends mouse enter to the red box when it enters teh yellow box-->
  6.          });   
  7.          $(window).mousemove(function(e) {
  8.            $('#event_info_display').empty();
  9.            $('#event_info_display').append("Page X: " + e.pageX);
  10.          });    
  11. $(window).resize(function(e) {
  12.   $('#event_info_display').empty();
  13.            $('#event_info_display').append(e.type);
  14.          });      
  15.          $(window).click(function() {
  16.            $('#event_info_display').empty();
  17.            $('#event_info_display').append('<br>'+"Click! "+'</br>');
  18.          });    
  19.         $(window).dblclick(function() {
  20.            $('#event_info_display').empty();
  21.            $('#event_info_display').append('<br>'+"Double Click! "+'</br>');
  22.          });  
  23. $('#my_box').mouseleave(function() {
  24.            $('#event_info_display').empty();
  25.            $('#event_info_display').append('<br>'+"Mouse Leave! "+'</br>');
  26.          });
  27.   
  28. });      
  29.   </script>
  30.    </head>
  31.    <body>
  32.      <div id="event_info_display"></div>    
  33. <div id="my_box"></div>
  34.    </body>
  35. </html>

UPDATE: I took out the mouse move event which displays x coordinate and the mouse enter and leave work fine.  So now where do I put the mouse move event?