stop mouseleave cuando se hace clic en un objeto

Question

Si quiero mouseenter un div, se mostrará un elemento, luego cuando mouseleave, el elemento desaparecerá.

Tengo una función de clic dentro del mouseenter, de modo que hay un menú desplegable al hacer clic.

Quiero que el menú desplegable y el elemento permanezcan activos incluso cuando se mueven los mouse. Por lo tanto, quiero que Mouseleaves no sea aplicable en esta situación, cuando hay un evento de clic. El usuario tendrá que hacer clic en el elemento nuevamente o en cualquier lugar de la página para hacer desaparecer el elemento y el menú desplegable.

Pero quiero mantener la función mouseleave en funcionamiento, de modo que si el usuario hace mouse en un div, el elemento se mostrará y podrán volver a hacer clic en él.

actualmente tienen algo como esto, pero simplemente no saben cómo hacer que el mouseleave a no ser aplicable cuando se hace clic

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 
     return false; 
    }); 
}).mouseleave(function(){ 
    $(".element",this).hide(); 
}); 

EDIT:

HTML

<div class='div'> 
    <div class='element' style='display:none;'> 
     boxed element 
    </div> 
    <div class='dropdown' style='display:none;'> 
     menu 
    </div> 
</div> 

Answer 1

Puede establecer un atributo personalizado para marcar el elemento al hacer clic. El manejador de eventos mouseleave puede verificar el valor de este atributo personalizado antes de ocultar el elemento.

decir algo como:

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 

     // set custom attribute for marking this one as clicked 
     $(this).attr('clicked', 'yes'); 

     return false; 
    }); 
}).mouseleave(function(){ 

    // check custom attribute before hiding the element 
    if($(this).attr('clicked') != 'yes') { 
     $(".element",this).hide(); 
    } 

}); 

Answer 2

Puede use los nuevos métodos on/off de jQuery para esto si usa 1.7+

Algo así como:

$(".div").on('mouseenter', function(){ 
    showElm(); 
    $(".element").click(function(){ 
     $(".div").off('mouseleave', hideElm); 
     $(".dropdown").show(); 
     return false; 
    }); 
}); 

$(".div").on('mouseleave', hideElm); 
$(document).on('click', hideElm); 

function hideElm() { $(".element, .dropdown").hide(); } 
function showElm() { $(".element").show(); } 

violín: http://jsfiddle.net/fSjtm/

probablemente necesitará alguna tweeking, pero le dará una idea general.

Answer 3

Esto hizo el truco para mí

$("#id").click(function(){ 
    $("#id").off("mouseleave"); 
}); 

Answer 4

uso event.stopPropagation();

esto es mejor porque se puede utilizar enlaces en el elemento

$(".div").on('mouseenter', function(){ 
 
    showElm(); 
 
    $(".element").click(function(event){ 
 
     $(".div").off('mouseleave', hideElm); 
 
     $(".dropdown").show(); 
 
     event.stopPropagation(); 
 
    }); 
 
}); 
 

 
$(".div").on('mouseleave', hideElm); 
 
$(document).on('click', hideElm); 
 

 
function hideElm(event) { $(".element, .dropdown").hide(); } 
 
function showElm(event) { $(".element").show(); }

.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; } 
 
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='div'>HERE 
 
    <div class='element'> 
 
     boxed element 
 
    </div> 
 
    <div class='dropdown'> 
 
     menu 
 
    </div> 
 
</div>

Answer 5

Parece caso mouseleave que se refieren a, se dispara a medida por el jQuery clic y no un mouseEvent originales. Prueba esto:

$(".div").on('mouseenter', function(){ 
    $(".element").on('click', function(){ ... }); 
}); 

$(".div").on('mouseleave', function(event){ 
    if(typeof(e.originalEvent) != 'undefined'){ 
     // only when mouseleave is the original event. 
    } 
});