Sự cố với mousemove trong Internet Explorer

Question

Trình khám phá Internet không kích hoạt sự kiện onmousemove khi mục tiêu sự kiện được định vị trên phần tử <img> và thiếu nền.

Nhưng nó đăng ký sự kiện khi mục tiêu có nền. Có ai có một lời giải thích cho điều này? Tôi đã có hành vi tương tự trong IE10, IE9 và IE8.

Fiddle ở đây: http://jsfiddle.net/xSpqE/2/

Answer 1

Tuy nhiên, một trình duyệt IE thất bại! Đây là chi tiết của một workaround hơn một câu trả lời, nhưng có vẻ như để làm việc ổn:

var is_ie = $.browser.msie; 
if(is_ie){ 
    $('.main img').mousemove(function(e){ 
     $('.pageX').text('pageX: '+e.pageX); 
    } 
} 

Đó là ngoài các $('.overlay').mousemove chức năng, vì vậy giữ cho rằng quá, và tất nhiên việc kiểm tra is_ie là không bắt buộc.

Answer 2

Như OP hỏi vì một lý do, đây là bước đột phá của tôi:

Nó dễ dàng hơn để giải thích trực quan, vì vậy trước hết chúng ta hãy thêm một handler nhấp chuột vào img s:

$('img').click(function() { 
    $('.pageX').text('img clicked!'); 
}); 

Fiddle

Đủ công bằng. Bạn nhấp vào hình ảnh trong trình duyệt Chrome/Firefox/không phải IE và sẽ không có gì xảy ra khi hoàn toàn được định vị div bao gồm nó.

Bây giờ hãy thử trên IE. Trình xử lý nhấp chuột của img được kích hoạt! Do đó, nó cho thấy rằng IE đẩy các phần tử thông qua các phần tử "trong suốt" được định vị hoàn toàn (không có nội dung hoặc nền). Thú vị hơn, các yếu tố tương đối vị trí bị cùng một vấn đề và thiết lập z-index trên một trong hai/cả hai yếu tố sẽ không giải quyết được một trong hai. Tất nhiên, vì hình ảnh ở trên lớp phủ, hình ảnh sẽ không kích hoạt sự kiện mousemove của lớp phủ.

Giải pháp thay thế là cung cấp một số "điền" cho lớp phủ, giả sử background:rgba(0,0,0,0) sẽ buộc IE giữ nguyên tố vị trí tuyệt đối ở trên cùng. Fiddle. Nếu bạn cần hỗ trợ các trình duyệt không có hỗ trợ rgba, hãy sử dụng gif trong suốt 1x1px làm nền.

Tôi chưa bao giờ thấy điều này được xác định trong bất kỳ thông số kỹ thuật nào cũng như không chính thức được báo cáo là lỗi. Không có logic hoặc lý do cho các yếu tố hoàn toàn vị trí mà không có nội dung hoặc nền tảng để chịu vấn đề z-index này, do đó tôi sẽ gọi nó là một lỗi IE khác. Có thể báo cáo nó trên Microsoft forums sẽ được sử dụng.

Ngoài ra, câu hỏi có liên quan: IE bug: absolutely-positioned element with a non-transparent background colour