Làm cách nào để kiểm tra xem người dùng có thể xem và nhấp vào một phần tử không?

Question

Chỉ đơn giản là có thể tìm thấy tất cả các phần tử thực sự có thể nhìn thấy và có thể nhấp trong trang bằng chức năng document.elementFromPoint. Tuy nhiên, nó trả về null cho các phần tử bên ngoài chế độ xem.

Vì vậy, làm cách nào để tìm tất cả các thành phần có thể nhấp và hiển thị trong toàn bộ trang? Các thành phần hiển thị không chỉ giới hạn ở các kiểu. Chỉ cần xem xét một vùng chứa <div> hiện bị ẩn sau tất cả các phần tử con. Vì vậy, phụ huynh <div> không còn hiển thị.

Vì vậy, bạn có bất kỳ ý tưởng làm thế nào nó có thể tìm thấy tất cả thực sự yếu tố có thể nhìn thấy trong trang? Trong ví dụ trên, rõ ràng là "Phụ huynh <div>" không hiển thị thực tế. Có một số tình huống không thể đoán trước khác mà các thành phần đó có thể không hiển thị và các kiểu (display, visibility, v.v.) có thể không cho biết.

Ý định cuối cùng của tôi: Tôi muốn kiểm tra xem một thành phần có phải là thực sự là hiển thị và có thể nhấp cho người dùng cuối hay không. Ví dụ như trường hợp sử dụng, tôi muốn tìm tất cả các vùng có thể mà người dùng có thể nhấp vào.

Answer 1

Tôi nghĩ bạn đã hiểu sai những điều cơ bản đằng sau sự kiện trong domApi. sẽ có các bong bóng và ảnh chụp trong bất kỳ sự kiện nào xảy ra tại khách hàng. bạn phải có mã như thế này document.addEventListener('click',function(){},false),

có nghĩa là sử dụng bong bóng thay vì chụp để xử lý sự kiện. vì vậy phần tử dom thực sự có thể nhấp có liên quan đến việc DOMJ có sử dụng bong bóng hoặc chụp