dừng mouseleave khi nhấp vào một đối tượng

Question

Nếu tôi muốn di chuột qua một div, một phần tử sẽ hiển thị, sau đó khi mouseleave, phần tử biến mất.

Tôi có chức năng nhấp chuột bên trong trình điều khiển chuột để có menu thả xuống khi được nhấp.

Tôi muốn trình đơn thả xuống và phần tử vẫn hoạt động ngay cả khi mouseleaves. Vì vậy, tôi muốn mouseleaves không được áp dụng trong tình huống này, khi có một sự kiện click. Người dùng sẽ phải nhấp vào phần tử một lần nữa hoặc bất cứ nơi nào trên trang để làm cho phần tử và dropdownmenu biến mất.

Nhưng tôi muốn giữ chức năng mouseleave hoạt động để nếu người dùng di chuột qua div, phần tử sẽ hiển thị và họ có thể nhấp lại vào đó.

Tôi hiện đang có một cái gì đó như thế này, nhưng tôi chỉ không biết làm thế nào để làm cho MouseLeave không được áp dụng khi nhấn vào

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

Bạn có thể đặt thuộc tính tùy chỉnh để đánh dấu mục là được nhấp. Trình xử lý sự kiện mouseleave có thể kiểm tra giá trị của thuộc tính tùy chỉnh này trước khi ẩn phần tử.

ví dụ: Một cái gì đó như:

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

Bạn có thể sử dụng các phương pháp bật/tắt mới của jQuery cho điều này nếu bạn sử dụng 1.7+

Một cái gì đó như:

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

lẽ sẽ cần một số tweeking, nhưng nó sẽ cung cấp cho bạn một ý tưởng chung.

Answer 3

này đã làm các trick cho tôi

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

Answer 4

sử dụng event.stopPropagation();

này là tốt hơn bởi vì bạn có thể sử dụng liên kết trên yếu tố

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

Có vẻ như sự kiện MouseLeave bạn tham khảo, được tùy chỉnh kích hoạt bởi các nhấp chuột jquery và không phải là một mouseEvent gốc. Hãy thử điều này:

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