Internet Explorer: trạng thái di chuột trở nên dính khi phần tử DOM mục tiêu được di chuyển trong DOM

Question

Tôi đang xây dựng một ứng dụng cho phép bạn di chuyển các mục danh sách từ danh sách này sang danh sách khác bằng cách nhấp vào chúng. Tuy nhiên, để người dùng biết hành động dự định của một con trỏ là gì, tôi đã thiết lập: trạng thái di chuột trong CSS để hiển thị hướng dẫn như "< < move"

Sự cố mà tôi đã tìm thấy là rằng trong Internet Explorer (thử nghiệm phiên bản 7-9), khi tôi di chuyển một phần tử DOM, trạng thái di chuột của phần tử đó vẫn còn (trở thành dính), ngay cả khi chuột được di chuyển xung quanh. Trạng thái hover chỉ biến mất khi người dùng di chuột qua mục đó ở vị trí mới và sau đó di chuyển chuột của họ. Đây là một Internet Explorer chỉ có vẻ vấn đề.

Bạn có thể thấy vấn đề nếu bạn đang sử dụng trình duyệt IE bằng cách vào http://jsfiddle.net/hc2Eu/32/

Có tất nhiên một workaround đó là không sử dụng CSS: trạng thái di chuột và sử dụng một sự kiện JQuery di chuột thay vào đó, nhưng điều này chắc chắn là không cách tốt nhất để làm việc và giữ các yếu tố: trạng thái di chuột được kiểm soát trong CSS là cách xa và mạnh mẽ nhất để thực hiện điều này. Cách giải quyết có thể được xem tại http://jsfiddle.net/hc2Eu/29/

Có ai tìm ra cách tôi có thể nói với Internet Explorer bằng cách nào đó rằng phần tử không còn nằm trong chuột nữa và nó sẽ giải phóng trạng thái: hover?

Matt

Answer 1

Hãy thử nhân bản phần tử thay vì gắn trực tiếp phần tử đó. Khi bạn nối thêm, bạn lấy phần tử từ vị trí hiện tại và trạng thái của nó trong DOM và đặt nó ở vị trí mới của nó - về cơ bản chỉ di chuyển nó. IE rõ ràng là không sơn lại phần tử khi điều này xảy ra hoặc đặt lại trạng thái của nó cho đến khi bạn di chuột qua.

Bằng cách nhân bản nó, bạn buộc IE tạo phần tử mới, vì nó không có trên trang, không thể áp dụng trạng thái di chuột cho nó. Sau đó, chỉ cần thêm nó vào container mới của nó, loại bỏ bản gốc, và bạn đã hoàn tất.

Xem ví dụ trong fiddle này: Hai dòng mã, trình duyệt chéo và bạn sẽ vẫn ngắn gọn và không gây ô nhiễm mã của bạn. :)

http://jsfiddle.net/hc2Eu/36/

Answer 2

điều này sẽ giải quyết vấn đề của bạn. sao chép mục được nhấp (thêm đúng nếu bạn muốn lưu sự kiện nhấp và các trình xử lý khác) chèn nó sau chính nó để nó có cùng một vị trí trong dom. sau đó loại bỏ nó. bản sao sẽ không bị mắc kẹt với trạng thái di chuột bị kẹt. Tất cả các tài liệu tham khảo là tương đối (this) để nó sẽ làm việc bất cứ nơi nào mà không thay đổi bộ chọn.

 $("#elementwithhover").click(function() { 
      // code that makes element or parent slide or 
      // otherwise move out from under mouse. 
      $(this).clone(true).insertAfter($(this)); 
      $(this).remove(); 
     });