Mouse and mouse trigger trigger

Question

I have these two mouseover and mouseout events in JS. They are intended to verify that I am hanging over the panel on my page. But the problem is that when I hover the panel over the panel, it fires (well), but then when I hover over another element inside that panel, it fires the mouseout event and then the mouseover event again when I move to another parts inside the panel.

I just want the mouseover and mouseout events to fire once! One time to enter the panel another to exit. Is there a way to extend the onover call to all child elements in div.panel. It looks like it will fix it.

Here are my events

 $(document).off("mouseover").on("mouseover", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseover");
   console.log("over" + marker.spaceId);
 });

 $(document).off("mouseout").on("mouseout", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseout");
   console.log("out" + marker.spaceId);
 });

Run codeHide result

Answer 1

, mouseenter mouseover mouseleave mouseout. : mouseenter , "" , , mouseenter.

mouseleave vs of mouseout. @gilly3 > . , mouseover/leave, mouseover/enter mouseout/leave.

:

• , . node, - , .
• (h) overing . , , , mouseover. , , . li >

, :

$(document).off("mouseenter").on("mouseenter", "div.panel", function() {
  var panelSpaceId = $(this).attr("data-spaceId");
  var marker = _.find(scope.markers, function(item) {
    return item.spaceId == panelSpaceId
  })
  google.maps.event.trigger(marker, "mouseenter");
  console.log("over" + marker.spaceId);
});

$(document).off("mouseleave").on("mouseleave", "div.panel", function() {
  var panelSpaceId = $(this).attr("data-spaceId");
  var marker = _.find(scope.markers, function(item) {
    return item.spaceId == panelSpaceId
  })
  google.maps.event.trigger(marker, "mouseleave");
  console.log("out" + marker.spaceId);
});