Đó là reproducable trong tất cả các trình duyệt trong trường hợp sau đây:
<!doctype html>
<html lang="en">
<head>
<title>Focus</title>
<style>
button { display: inline-block; width: 30px; height: 30px; background-color: red; }
button:focus { background-color:green; }
span { position: absolute; display:inline-block; width:100px }
</style>
</head>
<body>
<button>
<span tabindex="1">
click here
</span>
</button>
</body>
</html>
Và tabindex không được đảm bảo để thêm focus vì lý do sau:
một yếu tố mà chỉ có thể đặt tiêu điểm vì thuộc tính tabIndex nó sẽ cháy một sự kiện click để đáp ứng với một kích hoạt phi chuột
chủ trương tiếp cận
mô tả cách giải quyết như vậy:
kỹ thuật cho việc cung cấp quyền truy cập vào các kịch bản bao gồm:
Cho phép người dùng định cấu hình tác nhân người dùng để các trình xử lý sự kiện mouseover/mouseout được kích hoạt bằng (và kích hoạt) các sự kiện lấy nét/làm mờ. Tương tự, cho phép người dùng sử dụng lệnh phím, chẳng hạn như enter và Shift-Enter để kích hoạt các sự kiện onclick và ondblclick.
Triển khai "Mô hình đối tượng tài liệu (DOM) Cấp 2 Sự kiện" [DOM2EVENTS] sự kiện với một sự kiện kích hoạt duy nhất và cung cấp phương pháp kích hoạt sự kiện đó với từng thiết bị đầu vào được hỗ trợ hoặc API đầu vào. Đây phải giống như các sự kiện và ánh xạ được cung cấp ở trên (nhưng lưu ý rằng tác nhân người dùng cũng là một trình soạn thảo có thể muốn sử dụng các sự kiện nhấp chuột duy nhất để di chuyển dấu nháy hệ thống và muốn cung cấp một hành vi khác để kích hoạt bằng chuột). Ví dụ, Amaya [AMAYA] sử dụng lệnh doAction để kích hoạt các liên kết và thành phần biểu mẫu, có thể được kích hoạt bằng chuột (và có thể đặt nó cho nhấp chuột một lần hoặc nhấp đúp) hoặc theo bàn phím (có thể đặt nó cho bất kỳ phím nào bằng cấu hình bàn phím của Amaya)
Đối với tác giả: Ghi lại tác động của các tập lệnh quan trọng đã biết để cung cấp cho người dùng ý tưởng trước những gì họ làm. Làm như vậy bằng cách sử dụng các yếu tố hoặc thuộc tính có liên quan của đặc tả (ngôn ngữ đánh dấu), hoặc nếu không có, hãy cung cấp mô tả về hành vi của tập lệnh.
Ngoài ra, hành vi này là không xác định:
Các: tập trung pseudo-class áp dụng trong khi một phần tử có trọng tâm (chấp nhận sự kiện bàn phím hoặc các hình thức nhập văn bản).
Một phần tử có thể khớp với nhiều lớp giả cùng một lúc.
CSS không xác định yếu tố nào có thể ở trạng thái ở trên hoặc cách các trạng thái được nhập và rời.
Sử dụng một polyfill focusin/focusout để bình thường hóa các hành vi qua trình duyệt:
function focusPolyfill()
{
'use strict';
var w = window,
d = w.document;
function addPolyfill(e)
{
var
\t \t type = e.type === 'focus' ? 'focusin' : 'focusout',
\t \t event = new CustomEvent(type, { bubbles:true, cancelable:false });
event.c1Generated = true;
e.target.dispatchEvent(event);
}
function removePolyfill(e)
{
if(!e.c1Generated)
{
// focus after focusin, so chrome will the first time trigger tow times focusin
d.removeEventListener('focus' ,addPolyfill ,true);
d.removeEventListener('blur' ,addPolyfill ,true);
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
}
\t }
\t
function removeHandler()
{
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
}
if(w.onfocusin === undefined)
{
d.addEventListener('focus' ,addPolyfill ,true);
d.addEventListener('blur' ,addPolyfill ,true);
d.addEventListener('focusin' ,removePolyfill ,true);
d.addEventListener('focusout' ,removePolyfill ,true);
}
w.setTimeout(removeHandler);
}
Sau đây là trình tự đặc trưng của sự kiện khi tập trung được chuyển giữa các yếu tố , bao gồm các sự kiện DOMFocusIn và DOMFocusOut không được chấp nhận. Thứ tự được hiển thị giả định rằng không có yếu tố nào ban đầu được tập trung.
User shifts focus
1. focusin Sent before first target element receives focus
2. focus Sent after first target element receives focus
3. DOMFocusIn If supported
User shifts focus
4. focusout Sent before first target element loses focus
5. focusin Sent before second target element receives focus
6. blur Sent after first target element loses focus
7. DOMFocusOut If supported
8. focus Sent after second target element receives focus
9. DOMFocusIn If supported
Tài liệu tham khảo
Tôi cũng có thể đăng báo cáo lỗi về lỗi. Đây là: https://bugzilla.mozilla.org/show_bug.cgi?id=1138028 – jlowcs
u có thể giải thích lý do tại sao bạn không muốn hoặc không thể sử dụng "position: relative;"? –
Thành thật mà nói, tôi không nhớ. Tôi nghĩ tôi đã làm mọi thứ khác đi. Nhưng đó không phải là vấn đề. Vấn đề là hành vi đó không có ý nghĩa. – jlowcs