Sự kiện mờ dừng sự kiện nhấp chuột hoạt động?

Question

Dường như sự kiện Blur dừng trình xử lý sự kiện nhấp chuột hoạt động? Tôi có một hộp kết hợp nơi các tùy chọn chỉ xuất hiện khi trường văn bản có tiêu điểm. Chọn liên kết tùy chọn sẽ khiến sự kiện xảy ra.

Tôi có một ví dụ fiddle đây: http://jsfiddle.net/uXq5p/6/

Để tái sản xuất:

1. Chọn hộp văn bản
2. Liên kết xuất hiện
3. Nhấp vào liên kết
4. Các mờ thậm chí xảy ra và liên kết biến mất
5. Không có gì khác xảy ra.

hành vi mong đợi:

Ở bước 5, sau khi mờ xảy ra, nhấp chuột thậm chí cũng nên sau đó lửa. Làm thế nào để tôi thực hiện điều đó?

UPDATE:

Sau khi chơi với điều này trong một thời gian, có vẻ như ai đó đã đi đến độ dài lớn để ngăn chặn một đã xảy ra-nhấp kiện khỏi bị xử lý nếu một sự kiện mờ làm cho các yếu tố nhấp UN- có thể nhấp.

Ví dụ:

$('#ShippingGroupListWrapper').css('left','-20px'); 

làm việc tốt, nhưng

$('#ShippingGroupListWrapper').css('left','-2000px'); 

ngăn chặn sự kiện click.

này dường như là một lỗi trong Firefox, kể từ khi thực hiện một yếu tố un-nhấp được nên ngăn chặn tương lai nhấp chuột, nhưng không hủy những cái đó đã xảy ra khi nó có thể được nhấp vào.

Những điều khác mà ngăn chặn sự kiện nhấp chuột từ chế biến:

$('#ShippingGroupListWrapper').css('z-index','-20'); 
$('#ShippingGroupListWrapper').css('display','none'); 
$('#ShippingGroupListWrapper').css('visibility','hidden'); 
$('#ShippingGroupListWrapper').css('opacity','.5'); 

Tôi đã tìm thấy một vài câu hỏi khác trên trang web này đang gặp vấn đề tương tự. Dường như có hai giải pháp nổi xung quanh:

1. Sử dụng độ trễ. Điều này là xấu bởi vì nó tạo ra một điều kiện cuộc đua giữa ẩn và xử lý sự kiện nhấp chuột. Nó cũng cẩu thả.

2. Sử dụng sự kiện mousedown. Nhưng đây không phải là giải pháp tuyệt vời vì clicklà sự kiện chính xác cho liên kết. Hành vi của mousedown phản trực giác từ góc độ UX, đặc biệt vì bạn không thể hủy nhấp chuột bằng cách di chuyển chuột ra khỏi phần tử trước khi nhả nút.

Tôi có thể nghĩ thêm một vài điều nữa.

3.Use mouseover và mouseout vào liên kết để bật/tắt các sự kiện mờ cho lĩnh vực này. Điều này không hoạt động với tab bàn phím vì chuột không liên quan.

4. Giải pháp tốt nhất sẽ là một cái gì đó như:

$('#ShippingGroup').blur(function() 
{ 
    if($(document.activeElement) == $('.ShippingGroupLinkList')) 
     return; // The element that now has focus is a link, do nothing 
    $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
} 

Thật không may, $(document.activeElement) dường như luôn luôn quay trở lại các yếu tố cơ thể, không phải là người được nhấp. Nhưng có lẽ nếu có một cách đáng tin cậy để biết hoặc là 1. yếu tố nào bây giờ đã tập trung hoặc hai, yếu tố nào gây ra mờ (không yếu tố nào làm mờ) từ bên trong trình xử lý mờ. Ngoài ra, có bất kỳ sự kiện nào khác (ngoài mousedown) cháy trước khi bị mờ không?

Answer 1

click trình kích hoạt sự kiện sau blur để liên kết bị ẩn. Thay vì sử dụng click, hãy sử dụng mousedown nó sẽ hoạt động.

$('.ShippingGroupLinkList').live("mousedown", function(e) { 
    alert('You wont see me if your cursor was in the text box'); 
}); 

Cách khác thay thế trước khi ẩn liên kết trên sự kiện blur. Của nó tối đa bạn cách tiếp cận để đi cho.

Demo

Answer 2

Bạn có thể thử các sự kiện mousedown thay vì click.

$('.ShippingGroupLinkList').live("mousedown", function(e) { 
    alert('You wont see me if your cursor was in the text box'); 
}); 

Đây rõ ràng không phải là giải pháp tốt nhất là một sự kiện mousedown không đạt được cùng một cách cho người sử dụng hơn một sự kiện click. Rất tiếc, sự kiện blur cũng sẽ hủy các sự kiện mouseup.

Answer 3

4. Giải pháp tốt nhất sẽ là một cái gì đó như:

$('#ShippingGroup').blur(function() 
{ 
    if($(document.activeElement) == $('.ShippingGroupLinkList')) 
     return; // The element that now has focus is a link, do nothing 
    $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
} 

Thật không may, $ (document.activeElement) dường như luôn luôn trở lại các yếu tố cơ thể, không phải là người được nhấp. Nhưng có lẽ nếu có cách đáng tin cậy để biết hoặc 1. yếu tố nào hiện có tiêu điểm hoặc hai, yếu tố nào gây ra hiện tượng mờ (không phải yếu tố nào làm mờ) từ trong trình xử lý mờ.

Điều bạn có thể đang tìm kiếm là e.relatedTarget. Vì vậy, khi nhấp vào liên kết, e.relatedTarget sẽ được điền với phần tử liên kết, vì vậy trong trình xử lý mờ, bạn có thể chọn không ẩn vùng chứa nếu phần tử được nhấp trong vùng chứa (hoặc so sánh trực tiếp với liên kết):

$('#ShippingGroup').blur(function(e) 
{ 
    if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) { 
    // Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList')) 

     $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
    } 
} 

(relatedTarget có thể không được hỗ trợ trong các trình duyệt cũ cho blur sự kiện, nhưng nó dường như làm việc trong mới nhất của Chrome, Firefox và Safari)

Answer 4

Thực hiện một hành động mà nên xảy ra trên một click trên mousedown là UX xấu .Thay vào đó, click được tạo thành một cách hiệu quả là gì? A mousedown và mouseup.

Do đó, dừng việc truyền sự kiện mousedown trong trình xử lý mousedown và thực hiện tác vụ trong trình xử lý mouseup.

Một ví dụ trong ReactJS:

<a onMouseDown={e => e.preventDefault()} 
    onMouseUp={() => alert("CLICK")}> 
    Click me! 
</a>