Si encuentra este hilo con un problema similar de escucha de eventos, el problema puede estar en su CSS y no en su Javascript. Vea mi respuesta a continuación para obtener más detalles.

Pasé una cantidad considerable de tiempo buscando SO y buscando soluciones de otros a problemas similares sin éxito, así que finalmente tuve que crear una cuenta.

Estoy trabajando en una página web que tiene una imagen de un mapa del mundo con algunos marcadores de ubicación en la parte superior que representan las ubicaciones de las oficinas. La idea es que pasar el mouse sobre uno de estos pines alterará algunas imágenes y texto en otras partes de la página.

Sin embargo, cuando paso el mouse sobre cualquiera de los pines, no pasa nada. Ningún texto o imagen cambia en otros lugares, y no hay mensajes impresos en la consola. No veo ningún error informado. Me aseguré de que los eventos no estén vinculados hasta después de que el documento esté listo, por lo que no sé qué estoy haciendo mal. El mensaje de la consola "documento listo" se imprime indicando que los oyentes deben estar vinculados. Intenté cambiar "hacer clic" sin ningún efecto, y también intenté usar jQuery para delegar el evento al documento (que se sugirió en una pregunta similar) y tampoco vi ninguna mejora.

Cualquier ayuda muy apreciada.

EDITAR: Al ver algunos de los comentarios sobre la claridad, he comentado todo el código en mi javascript, excepto lo que se enumera a continuación. Todavía no veo ningún mensaje de consola registrado cuando paso el mouse sobre el elemento. Mirando en la consola, una vez más no veo ningún mensaje de error y puedo verificar que el evento "mouseenter" está ligado a meridianPin.

HTML para el mapa tiene este aspecto:

<!-- Image & Map Widgets -->
<div id="mapContainer" class="itt-contact-img-container">
  <img class="itt-full-width-image" src="./Images/mapBanner.png" alt="worldMap">
  <img id="bangalorePin" class="itt-contact-pin itt-contact-pin-bangalore" src="./Icons/svg/locationIcon.svg">
  <img id="rosevillePin" class="itt-contact-pin itt-contact-pin-roseville" src="./Icons/svg/locationIcon.svg">
  <img id="mumbaiPin" class="itt-contact-pin itt-contact-pin-mumbai" src="./Icons/svg/locationIcon.svg">
  <img id="jaipurPin" class="itt-contact-pin itt-contact-pin-jaipur" src="./Icons/svg/locationIcon.svg">
  <img id="lakeoswegoPin" class="itt-contact-pin itt-contact-pin-lakeoswego" src="./Icons/svg/locationIcon.svg">
  <img id="camasPin" class="itt-contact-pin itt-contact-pin-camas" src="./Icons/svg/locationIcon.svg">
  <img id="meridianPin" class="itt-contact-pin itt-contact-pin-meridian" src="./Icons/svg/locationIcon.svg">
</div>

Comentó todos los enlaces de escucha de eventos excepto este:

$(document).ready(function(){
  console.log("document ready");
    document.getElementById("meridianPin").addEventListener("mouseenter", meridianHighlight);
})

Aquí está la función de resaltado en cuestión ahora que todo lo demás está comentado:

function meridianHighlight(){
  console.log("meridian highlight");

  $("#itt-contact-silhouette").attr("src","./Icons/svg/idaho.svg");

  $("#itt-contact-hdr-merdian").css("display","block");
  $("#itt-contact-info-merdian").css("display","block");
  $("#itt-contact-hdr-camas").css("display","none");
  $("#itt-contact-info-camas").css("display","none");
  $("#itt-contact-hdr-lakeoswego").css("display","none");
  $("#itt-contact-info-lakeoswego").css("display","none");
  $("#itt-contact-hdr-roseville").css("display","none");
  $("#itt-contact-info-roseville").css("display","none");
  $("#itt-contact-hdr-jaipur").css("display","none");
  $("#itt-contact-info-jaipur").css("display","none");
  $("#itt-contact-hdr-mumbai").css("display","none");
  $("#itt-contact-info-mumbai").css("display","none");
  $("#itt-contact-hdr-bangalore").css("display","none");
  $("#itt-contact-info-bangalore").css("display","none");
}
-1
PNelly 14 nov. 2017 a las 00:35

2 respuestas

La mejor respuesta

Resulta que esto era de alguna manera un problema de CSS. En mi html, puede ver "mapBanner" en la parte superior del grupo de imágenes, que era una imagen grande que abarcaba el ancho de la ventana gráfica, mientras que cada uno de los iconos de ubicación era de 22x22px. Los iconos aparecieron en la parte superior de la imagen del mapa mundial en la página, pero no se dieron cuenta de los oyentes de eventos que pasaban por encima. Cambié la imagen del mapa para que sea la imagen de fondo del div contenedor, y ahora los oyentes de eventos disparan como deberían.

Estoy feliz de saber cómo avanzar, pero todavía no entiendo por qué lo que hice antes estuvo mal (aparte de que no funciona), ¿debería esperar que los elementos grandes de la página enmascaren los oyentes de eventos de los elementos más pequeños dentro?

1
PNelly 14 nov. 2017 a las 19:45

No ha proporcionado todas las funciones de devolución de llamada, por lo que no podemos saber cuál es el problema exacto, pero el que proporcionó está funcionando como debería, por lo que me inclino a creer que tiene algunos errores de sintaxis en el resto código que impide que se ejecute todo el código.

$(document).ready(function(){
  console.log("document ready");
    document.getElementById("meridianPin").addEventListener("mouseenter", meridianHighlight);

})

function meridianHighlight(){
  console.log("meridian highlight");

  $("#itt-contact-silhouette").attr("src","./Icons/svg/idaho.svg");

  $("#itt-contact-hdr-merdian").css("display","block");
  $("#itt-contact-info-merdian").css("display","block");
  $("#itt-contact-hdr-camas").css("display","none");
  $("#itt-contact-info-camas").css("display","none");
  $("#itt-contact-hdr-lakeoswego").css("display","none");
  $("#itt-contact-info-lakeoswego").css("display","none");
  $("#itt-contact-hdr-roseville").css("display","none");
  $("#itt-contact-info-roseville").css("display","none");
  $("#itt-contact-hdr-jaipur").css("display","none");
  $("#itt-contact-info-jaipur").css("display","none");
  $("#itt-contact-hdr-mumbai").css("display","none");
  $("#itt-contact-info-mumbai").css("display","none");
  $("#itt-contact-hdr-bangalore").css("display","none");
  $("#itt-contact-info-bangalore").css("display","none");
}
#meridianPin {
  width:300px;
  height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Image & Map Widgets -->
<div id="mapContainer" class="itt-contact-img-container">
  <img class="itt-full-width-image" src="./Images/mapBanner.png" alt="worldMap">
  <img id="bangalorePin" class="itt-contact-pin itt-contact-pin-bangalore" src="./Icons/svg/locationIcon.svg">
  <img id="rosevillePin" class="itt-contact-pin itt-contact-pin-roseville" src="./Icons/svg/locationIcon.svg">
  <img id="mumbaiPin" class="itt-contact-pin itt-contact-pin-mumbai" src="./Icons/svg/locationIcon.svg">
  <img id="jaipurPin" class="itt-contact-pin itt-contact-pin-jaipur" src="./Icons/svg/locationIcon.svg">
  <img id="lakeoswegoPin" class="itt-contact-pin itt-contact-pin-lakeoswego" src="./Icons/svg/locationIcon.svg">
  <img id="camasPin" class="itt-contact-pin itt-contact-pin-camas" src="./Icons/svg/locationIcon.svg">
  <img id="meridianPin" class="itt-contact-pin itt-contact-pin-meridian" src="./Icons/svg/locationIcon.svg">
</div>
-1
Scott Marcus 13 nov. 2017 a las 21:42