hành động trên mờ trừ khi yếu tố cụ thể nhấp với jQuery

Question

Có hai yếu tố trong vở kịch:

$('#myInput') // an input field for search 
$('#myList') // a list to display search results 

Tôi muốn ẩn danh sách khi đầu vào không còn tập trung, như vậy:

$('#myInput').blur(function() { 
    $('#myList').hide(); 
}); 

Điều này làm việc tuyệt vời, ngoại trừ khi một mục danh sách được nhấp vào, bởi vì sự kiện mờ cháy và ẩn danh sách trước khi nhấp chuột được đăng ký. Mục tiêu là để danh sách hiển thị khi bất kỳ phần nào của danh sách được nhấp vào, mặc dù điều này sẽ khiến đầu vào bị mờ.

Tôi làm cách nào để thực hiện việc này? Cảm ơn!

Answer 1

Bạn có thể thực hiện điều này bằng cách giữ một biến toàn cầu, và setTimouts, để chờ đợi một sự chậm trễ 200ms và sau đó kiểm tra xem một trong 2 yếu tố có tập trung hay không.

var keepFocus = false; 

function hideList(){ 
    if(!keepFocus){ 
     $('#myList').hide(); 
    } 
} 

$('#myInput').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 


$('#myList').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 

Answer 2

Bạn cần có khả năng nói "làm mờ này() trừ khi danh sách tăng tiêu điểm cùng một lúc".

Câu hỏi này cho biết làm thế nào để phát hiện nếu một phần tử có tập trung: Using jQuery to test if an input has focus

Sau đó, tất cả các bạn cần làm là:

$("#myInput").blur(function() { 
    if (!$("#myList").is(":focus")) { 
     $("#myList").hide(); 
    } 
}); 

Answer 3

Cách tốt nhất để làm điều này là để đính kèm một event handler để các yếu tố cơ thể, sau đó một handler vào danh sách mà dừng sự kiện tuyên truyền:

$(body).click(function() { 
    $("#myList").hide(); 
}); 

$("#myList").click(function (e) { 
    e.stopImmediatePropagation(); 
}); 

này nghe cho một nhấp chuột bên ngoài # myInput và ẩn #myList. Đồng thời, hàm thứ hai lắng nghe một lần nhấp vào #myList và nếu nó xảy ra, nó ngăn không cho hide() kích hoạt.

Answer 4

Tôi đã gặp phải vấn đề tương tự, vì vậy đây là cách tôi đã giải quyết vấn đề.

Tôi đã đưa ra thực tế là blur() cháy sớm hơn click().

Vì vậy, tôi đã cố gắng thay đổi click() thành mousedown() và phát hiện ra rằng mousedown() sẽ kích hoạt trước blur().

Và để bắt chước click() bạn sẽ phải bắn mousedown() và sau đó mouseup()

Vì vậy, trong trường hợp của bạn tôi sẽ làm một cái gì đó như thế này:

var click_in_process = false; // global 

$('#myList').mousedown(function() { 
    click_in_process = true; 
}); 

$('#myList').mouseup(function() { 
    click_in_process = false; 
    $('#myInput').focus(); 

    // a code of $('#myList') clicking event 

}); 

$('#myInput').blur(function() { 
    if(!click_in_process) { 
     $('#myList').hide(); 

     // a code of what you want to happen after you really left $('#myInput') 

    } 
}); 

Demo/example: http://jsfiddle.net/bbrh4/

Hope nó giúp!