Đặt lại con trỏ về mặc định sau khi thêm con trỏ-sự kiện: không có trong Firefox

Question

Tôi đã gặp phải một hành vi lạ về mối quan hệ CSS giữa các nguyên tắc CSS pointer-events và cursor trong Firefox. Khi tôi đặt phần tử cursor của một phần tử thành bất kỳ giá trị nào khác với auto (giả sử là wait), loại con trỏ sẽ thay đổi tương ứng, như mong đợi. Tuy nhiên, khi tôi cũng thêm pointer-events: none vào cùng một phần tử, con trỏ được đặt lại thành auto. Điều tương tự cũng xảy ra nếu tôi sử dụng cursor: wait !important. Các quy tắc rất giống nhau hoạt động chính xác trong Chromium và IE (!).

Trong đầu tôi nghĩ rằng điều này có thể được dự kiến ​​hành vi khi pointer-events: none được thiết lập, nhưng theo MDN phần về giá trị none:

Yếu tố không bao giờ là mục tiêu của sự kiện chuột; tuy nhiên, các sự kiện chuột có thể nhắm mục tiêu các phần tử con cháu của nó nếu các hậu duệ đó ​​có các sự kiện con trỏ được đặt thành một số giá trị khác. Trong những trường hợp này, các sự kiện chuột sẽ kích hoạt trình lắng nghe sự kiện trên phần tử gốc này khi thích hợp trên đường đến/từ hậu duệ trong các giai đoạn chụp/bong bóng sự kiện.

Dường như Javascript sự kiện, không CSS sự kiện sẽ không được phổ biến.

Câu hỏi đặt ra là: có cách nào để sử dụng cả pointer-events: none và cursor: wait trên cùng một yếu tố trong Firefox không? Ngoài ra, tôi có đúng về việc giải thích các sự kiện Javascript/CSS liên quan đến đoạn trích được đề cập không?

Nếu vấn đề quan trọng, tôi đang sử dụng Firefox 31 trên Ubuntu 64bit

Đây là fiddle. Trong trường hợp này, tôi thêm các quy tắc động, nhưng điều tương tự cũng xảy ra khi chỉ sử dụng CSS. Kịch bản tôi đang nói đến là Change cursor to wait --> Disable pointer events

Answer 1

Chỉ ra rằng bạn phải đặt con trỏ trên phần tử gốc.

Đặt cả hai kiểu trên một phần tử hoặc con trỏ trên phần tử lồng nhau đặt lại con trỏ thành con trỏ mặc định.

<div class="cursor-wait"> 
    <a href="#">wait</a> 
    <div class="no-pointer-events"> 
     <a href="#">wait > no events</a><!-- works here --> 
    </div> 
</div> 

Xem Fiddle để biết chi tiết.