Nhấp qua div với kênh alpha

Question

Tôi đang cố gắng sao chép lớp "mờ dần" của twitter ở cuối tiện ích nguồn cấp dữ liệu (trên trang chính của họ tại twitter.com).

Cách duy nhất tôi có thể đưa ra mà không sử dụng html5 đã đặt div vị trí tuyệt đối phía trên div nguồn cấp dữ liệu và cung cấp cho nó một kênh alpha png có độ dốc trắng đến trong suốt phía trên. Điều này rất dễ đạt được.

Chỉ có vấn đề bây giờ là các div xuất hiện bên dưới các lớp trong suốt không thể nhấp được. Bất kỳ ý tưởng nào về cách làm cho các div có thể nhấp được? Có lẽ bạn có phương pháp khác để nhân rộng hiệu ứng này hoàn toàn?

Cảm ơn!

Answer 1

Bài viết này mô tả một phương pháp chụp sự kiện onclick và xử lý nó bằng cách tạm thời ẩn lớp phủ, từ chối nhấp chuột, sau đó bỏ ẩn nó một lần nữa. Ẩn sẽ không hiển thị cho người dùng cuối.

Forwarding Mouse Events Through Layers:

1. Các textarea (yếu tố mặt nạ của tôi) rằng được định vị phía trên lưới nhận mouseover, MouseMove, mousedown, mouseup và các sự kiện khác.
2. Đầu lớp lớp mặt nạ bị ẩn trong giây lát, để chúng tôi có thể tìm ra phần tử nào là bên dưới mặt nạ tại vị trí sự kiện.
3. Sự kiện được kích hoạt lại - đây là nơi mô hình Sự kiện DOM W3 và đơn giản hơn tương đương với số điện thoại của Microsoft.
4. Bắt đầu lại quy trình - sẵn sàng cho sự kiện tiếp theo.

EDIT: Tôi nghĩ rằng những gì Twitter không thực sự là đơn giản hơn nhiều. Có một tài sản CSS mượn từ SVG mà một loạt các trình duyệt đã thực hiện.

.overlay { pointer-events: none; } 

này hiện đang được hỗ trợ trong Firefox 3.6+, Safari 4 và Google Chrome - vì vậy nếu bạn hài lòng với nó để làm việc chỉ bằng các trình duyệt thì đây là một lựa chọn đơn giản hơn nhiều, với lợi thế nói thêm rằng nó cũng hoạt động cho các sự kiện di chuột, không chỉ nhấp vào các sự kiện.

Answer 2

Đối với IE, chỉ cần thiết lập đáy div hoặc layer sử dụng một chỉ số tiêu cực, như thế này:

{pointer-events: none; z-index: -100}