doble - eventos onmouse javascript

El evento Click evita que mouseout se dispare

Question

EDICIÓN FINAL: Encontré una solución mejor y más simple en este códec . Una demostración de la funcionalidad de trabajo.

EDIT: encontré de dónde viene el error. Aquí puedes ver un ejemplo. Cuando haces clic en "vamos", dices la pestaña Acerca de y pasas el dedo sobre el contacto, el contenido debe estar oculto. Pero vuelve a pasar el cursor sobre Acerca de y el contenido permanece visible, que no es. ¿Cómo me aseguro de que el evento mouseout se active después de hacer clic?

EDIT 2: Entonces noté que el método unbind () evita eso. Cuando lo elimino, parece que no puedo conseguir que el área de contenido permanezca activa cuando se hace clic cuando el método de mouse lo anula.

Hice algunas investigaciones sobre esto, pero no pude encontrar una solución en cuanto a por qué al suspenderse la clase removeclass no funciona. He encontrado un error con las funciones addClass () y removeClass (). Lo que pasa es que tengo esas funciones disparando sobre pasar el mouse o mouseover / mouseout y hacer clic para que se vuelva un poco confuso. Aquí hay una demostración de con qué estoy trabajando: JSFiddle .

Pantalla completa para una mejor vista.

Mi JavaScript puede ser un poco complicado, pero en última instancia, la forma en que se supone que esto funcione:

1. Si pasa el cursor sobre un punto en el mapa, el contenido en el cuadro rojo izquierdo debe revelar lo que es relevante para la ubicación, así como una "información sobre herramientas" del nombre de la ubicación. (esta parte funciona)

2. Al desplazar el mouse, se supone que debe volver a la lista de ubicaciones y la información sobre herramientas desaparece. Casi como un reinicio.

3. Ahora, si hace clic en el punto, tanto la información sobre herramientas como el contenido de la izquierda deben permanecer activos. Hasta que haga clic en el enlace "Volver a la lista" en el cuadro rojo o pase el puntero sobre los otros puntos. (esto también funciona)

El error que encontré es si hace clic en el panel de la lista y pasa el cursor sobre un par de puntos de ubicación después de un cierto tiempo, mientras que el estado de desplazamiento permanece activo cuando se desplaza sobre un par de ubicaciones (lo cual no se supone que ocurra). Se supone que todo debe regresar al panel de lista cuando se desplaza fuera del punto de ubicación en el mapa.

    $(''a.location'').click(function (event) {
    var loc = this.id;
    if ($(''div.panel'').hasClass(''list'')) {
        $(''div.'' + loc).removeClass(''current'');
        $(''.list'').addClass(''current'');
    }
    $(''.list'').removeClass(''current'');
    $(''div.panel.'' + loc).addClass(''current'');
    event.preventDefault();
}); //click function
$(''.back-list'').click(function (e) {
    $(''.panel'').removeClass(''current'');
    $(''.list'').addClass(''current'');
    $(''div.location-title.show'').removeClass(''show'').addClass(''hide'');
    $(''div.location-title.view'').removeClass(''view'');
    e.preventDefault();
}); //back button


$(''ul.locations li > a'').hover(function () {
//show location hover
var dot = this.id;
$(''div.location-title.'' + dot).removeClass(''hide'').addClass(''show'');

}, function () {
    var dot = this.id;
    //hide location hover
    $(''div.location-title.'' + dot).removeClass(''show'').addClass(''hide'');
}).click(function (event) {
    var dot = this.id;
    if (!$(''div.location-title.'' + dot).hasClass(''hide'')) {
        $(''div.location-title.'' + dot).addClass(''view'');
    } else {
        $(''div.location-title.'' + dot).removeClass(''view'');
    }
    event.preventDefault();
});

$(''.map__container > span'').on({
mouseover: function () { //mouseover
    var loc = $(this).attr(''class'');
    $(''.panel'').siblings().removeClass(''current''); //resets all classes that have current
    $(''.list'').removeClass(''current'');
    $(''div.panel.'' + loc).addClass(''current'');
    $(''div.show'').removeClass(''show'').addClass(''hide'');
    $(''div.location-title.'' + loc).removeClass(''hide'').addClass(''show'');
    var asb = $(''.location-title'').siblings();
    $(''div.location-title'').siblings().removeClass(''view'');
},
mouseout: function () { //mouseout
    var loc = $(this).attr(''class'');
    $(''div.'' + loc).removeClass(''current'');
    $(''div.location-title.'' + loc).removeClass(''show'').addClass(''hide'');
    if (!$(''div.'' + loc).hasClass(''current'')) {
        $(''.list'').addClass(''current'');
    } else {
        $(''.list'').addClass(''current'');
    }
},
click: function () {
    $(this).off(''mouseout'');
    var loc = $(this).attr(''class'');
    $(''div.location-title.show'').removeClass(''show'').addClass(''hide'');
    $(''div.location-title.'' + loc).removeClass(''hide'').addClass(''show'');
}
});

Además, si tienes mejores sugerencias para limpiar mi JavaScript, soy todo oídos. ¡Muchas gracias!

Answer 1

Si entiendo bien, es posible que desee probar con el evento Mouseleave, y yo usaría para modularizar la función toggleClass:

• Función ToggleClass Jquery

• Explicación de Mouseleave:

  mouseleave: function () { //mouseout
  var loc = $(this).attr(''class'');
  $(''div.'' + loc).removeClass(''current'');
  $(''div.location-title.'' + loc).removeClass(''show'').addClass(''hide'');
     if (!$(''div.'' + loc).hasClass(''current'')) {
        $(''.list'').addClass(''current'');
     } else {
        $(''.list'').addClass(''current'');
  }
  },

Espero que esto te ayude Saludos!

Answer 2

EDICIÓN FINAL: Encontré una solución mejor y más simple en este códec . Una demostración de la funcionalidad de trabajo.

Mi problema estaba en el ejemplo del código sobre $(this).off(''mouseout''); estaba quitando el mouseout cuando se hizo clic. Entonces, si volvieras a ese punto en el mapa y el mouseout de la ''información sobre herramientas'' permaneciera activo, no desaparecerá cuando descartes, lo cual debería desaparecer. No pude encontrar una manera de enlazarlo nuevamente, así que toggleClass () fue mucho mejor. ¡Me he estado tirando de mi cabello en esto!

 $(''.map__container span'').click(function(mapIcon){
                    mapIcon.preventDefault();
                    var icon = $(this).attr(''class'');  
                    var panel = $(this).attr(''class'');  

                    $(''.panel'').removeClass(''clicked'');
                    $(''.location-title'').removeClass(''clicked'');
                    $(''.panel.'' + panel).addClass(''clicked'');
                    $(''.location-title.'' + icon).addClass(''clicked'');
                });                
                //Show bubbles over dots on map
                $(''.map__container span'').hover(function(){
                    var hoverdot = $(this).attr(''class'');

                    $(''.location-title.'' + hoverdot).toggleClass(''selected'');
                });
                //Show bubbles on hover over anchor links
                $(''a.location'').hover(function(){
                    var hoverlink = this.id;

                    $(''.location-title.'' + hoverlink).toggleClass(''selected'');
                });
                //Anchor links show panels and bubbles
                $(''a.location'').click(function(e){
                    e.preventDefault();
                    var panel = this.id;
                    var icon = this.id;

                    $(''.panel'').removeClass(''clicked'');
                    $(''.location-title'').removeClass(''clicked'');
                    $(''.panel.'' + panel).addClass(''clicked'');
                    $(''.location-title.'' + icon).addClass(''clicked'');                        
                });
                //back button
                $(''.back-list'').click(function(backButton) {
                     backButton.preventDefault();

                    $(''.panel'').removeClass(''clicked'');
                    $(''.location-title'').removeClass(''clicked'');
                    $(''.list'').addClass(''clicked'');                              
                });