Chọn văn bản phía sau một phần tử khác với createEvent

Question

Tôi có một kịch bản nơi tôi có một số văn bản, có thể được người dùng chọn. Vấn đề là, có một lớp phủ giao diện người dùng trên đầu trang, ngăn cản việc chọn văn bản theo mặc định. Cách hợp lý để giữ lớp phủ và vẫn có thể chọn văn bản, sẽ sử dụng các sự kiện tổng hợp (sử dụng document.createEvent), nhưng do một số lý do, nó không hoạt động như mong đợi.

Các sự kiện dường như được ủy quyền chính xác và kích hoạt trình xử lý của chúng, nhưng không có văn bản nào được chọn. Tôi có một ví dụ here, đó là một sự đơn giản hóa thô của vấn đề.

Một vài lưu ý

1. Trong FF nếu bạn bắt đầu lựa chọn của bạn bên ngoài của lớp phủ, bạn vẫn có thể chọn văn bản mà bạn muốn, ngay cả khi nó dưới lớp phủ
2. Khi bạn có một bình thường lựa chọn trong khu vực không bị che khuất và bạn nhấp vào lớp phủ, nó sẽ được mong đợi từ sự kiện được ủy quyền mousedown để xóa lựa chọn đó, nhưng điều đó không xảy ra

Tôi thiếu một sự kiện cũng nên được ủy quyền (I có mousedown, mousemove và mouseup)? Hoặc là một số loại biện pháp bảo mật của trình duyệt để vô hiệu hóa hành vi đó (tham khảo chú thích nr 2)? Bất kỳ đề xuất nào khác về cách nhận kết quả mong muốn? Tôi biết tôi nên làm việc xung quanh các giải pháp lớp phủ hiện tại hoàn toàn, nhưng tôi đã tò mò về vấn đề chính nó.

Answer 1

Tôi đã tìm thấy hai giải pháp cho vấn đề này:

1. "con trỏ-sự kiện" bất động sản css. Yêu cầu IE 9.0+ mặc dù.
2. Có vẻ như chàng trai đến từ ExtJS giải quyết nó bằng cách chuyển tiếp sự kiện: demo, source, blog post

Answer 2

Tôi sẽ đề xuất thực hiện thủ thuật đơn giản: đặt phần tử trong suốt có cùng nội dung với văn bản ở trên cùng của văn bản và lớp phủ. Đây là demonstration.

P.S .: Từ kinh nghiệm của tôi, bất kỳ giải pháp nào trong biểu mẫu bạn đề xuất sẽ rất khủng khiếp. Nó sẽ bị ảnh hưởng từ sự không tương thích trình duyệt, tác dụng phụ của xung quanh mark-up và tạo kiểu tóc, vv