Zatrzymaj mouseleave po kliknięciu na obiekcie

Question

Jeśli chcę mouseenter elementu div, element pokaże, a następnie, gdy mouseleave, element znika.

Mam funkcję kliknięcia wewnątrz centrum myszy, więc po kliknięciu pojawia się menu rozwijane.

Chcę, aby menu rozwijane i element pozostawały aktywne nawet po kliknięciu myszą. Dlatego chcę, aby spacje do myszy nie były stosowane w tej sytuacji, gdy występuje zdarzenie kliknięcia. Użytkownik będzie musiał ponownie kliknąć element w dowolnym miejscu na stronie, aby element i menu rozwijane zniknęły.

Ale chcę, aby funkcja mouseleave działała, więc jeśli użytkownik myszy diva, element pokaże i może kliknąć go ponownie.

Obecnie mam coś takiego, ale ja po prostu nie wiem jak zrobić mouseLeave nie będą obowiązywać po kliknięciu

$(".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

Można ustawić niestandardowy atrybut oznaczania elementu jako kliknięty. Procedura obsługi zdarzeń mouseleave może sprawdzić wartość tego niestandardowego atrybutu przed ukryciem elementu.

czyli coś takiego:

$(".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

Można użyj nowych metod włączania/wyłączania jQuery, jeśli używasz 1.7 +

Coś jak:

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

Fiddle: http://jsfiddle.net/fSjtm/

będzie prawdopodobnie potrzebować tweeking, ale to daje ogólne pojęcie.

Answer 3

To załatwiło sprawę dla mnie

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

Answer 4

użytkowania Event.stopPropagation();

to jest lepsze, ponieważ można używać linków na elemencie

$(".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

Wydaje zdarzenie mouseLeave odnosić się do, jest zwyczaj wywołane przez kliknięcie jquery a nie oryginalnym MouseEvent. Spróbuj tego:

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