Mouseover y mouseout disparan varias veces

3 minutos de lectura

avatar de usuario de user1186050
usuario1186050

Tengo estos dos en eventos mouseover y mouseout en JS. Son para verificar si estoy pasando el mouse sobre un panel en mi página. Pero el problema es que cuando paso el mouse sobre un panel, se activa (bien), pero luego, cuando paso el mouse sobre otro elemento dentro de ese panel, activa el evento mouseout y luego los eventos mouseover nuevamente cuando me muevo a otra parte dentro del panel.

¡Solo quiero que los eventos mouseover y mouseout se activen una vez! Una vez para entrar en el panel otra para salir. ¿Hay alguna manera de propagar la llamada al pasar el mouse a todos los elementos secundarios en el div.panel? Parece que eso lo corregiría.

Aquí están mis eventos

$(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);
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Avatar de usuario de Terry
terry

Puedes evitar este problema usando mouseenter en vez de mouseovery mouseleave en vez de mouseout. La razón es simple: mouseenter solo se activa cuando el cursor “entra” en el elemento, que incluye a sus elementos secundarios, por lo que al pasar el cursor sobre el elemento secundario no se vuelve a activar el elemento. mouseenter evento.

Esta lógica similar se aplica a mouseleave contra de mouseout. Puedes ver este efecto sucediendo basado en un violín creado por @gilly3 en su respuesta a una pregunta similar. No estoy marcando su pregunta como duplicada porque su respuesta es principalmente para solucionar problemas mouseover/leave eventos en lugar de preguntar sobre la distinción entre mouseover/enter y mouseout/leave.

Es útil imaginar esto:

  • entrando significa cuando el cursor entra en los límites del elemento. Incluso cuando está en un nodo secundario, todavía está dentro de los límitespor lo tanto, nunca se activa varias veces.
  • (h) superando se puede visualizar como ver su elemento en un lienzo. Si el elemento sobre el que pasa el cursor está visible en la pantalla, el ratón sobre se activa el evento. El cursor ya no está sobre el elemento principal cuando el cursor se mueve sobre el elemento secundario, por lo tanto, cuando avanza y retrocede, el evento se activa una y otra vez.

Aquí está su código modificado, donde simplemente reemplacé los eventos ofensivos con los correctos:

$(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);
});

  • ¿Hay alguna manera de restablecer los disparadores en los eventos porque no parecen funcionar después de que actualizo la página con un ajax y vuelvo a cargar estos dos eventos?

    – usuario1186050

    14 de enero de 2017 a las 0:18


  • @ user1186050 Eso probablemente pertenece a otra pregunta. Sin embargo, puedo ver que está vinculando los eventos al elemento del documento, lo que no debería ser un problema. No puedo solucionar el problema basándome solo en esta información, tendrá que proporcionar un MCVE para tal fin.

    – terry

    14 de enero de 2017 a las 0:20

  • METROanimal, Concrete, y vcomprobable miejemplo

    – terry

    14 de enero de 2017 a las 0:30

  • Terry, publiqué la pregunta aquí stackoverflow.com/questions/41645224/…

    – usuario1186050

    14 de enero de 2017 a las 0:31

  • Estoy usando mouseenter y mouseleave, pero se activa varias veces en las filas de la tabla de datos…

    – Rahul Sonwanshi

    26 de enero de 2021 a las 10:50

¿Ha sido útil esta solución?