Sự kiện con trỏ CSS - Chấp nhận kéo, từ chối Nhấp vào

Question

tldr; Tôi cần một yếu tố để đăng ký kéo và thả các sự kiện con trỏ, nhưng vượt qua nhấp chuột và các sự kiện con trỏ khác để các yếu tố đằng sau nó.

Tôi đang tạo tính năng kéo và thả ảnh lên để phản ứng bằng cách sử dụng react-dropzone. Tôi muốn dropzone nằm trên toàn bộ trang, vì vậy nếu bạn kéo tệp vào bất kỳ phần nào của trang, bạn có thể thả tệp đó để tải lên hình ảnh. Các dropzone là minh bạch khi không có tập tin được kéo qua nó, vì vậy tôi cần nhấp chuột để đăng ký với các yếu tố đằng sau nó.

Để thực hiện điều này, tôi đã đưa ra phần vùng thả phong cách sau đây:

position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
pointer-events: none; 

Tuy nhiên, pointer-events: none; làm cho dropzone để không nhận ra kéo cần thiết và thả các sự kiện. Có cách nào để nhận ra các sự kiện con trỏ cụ thể này hay không, trong khi chuyển những người khác (như nhấp) vào các phần tử phía sau dropzone?

Answer 1

Gần đây, tôi đã gặp sự cố tương tự và được giải quyết bằng cách đặt z-index cho dropzone thành 1, trong khi thiết lập chỉ mục z cho các phần tử nói là 2, với vị trí tương đối.