Làm cách nào để hủy liên kết "di chuột" trong jQuery?

Làm cách nào để hủy liên kết "di chuột" trong jQuery?

Điều này không hoạt động:

$(this).unbind('hover');

$(this).unbind('mouseenter').unbind('mouseleave')

hoặc ngắn gọn hơn (cảm ơn @Chad Grant ):

$(this).unbind('mouseenter mouseleave')

Trên thực tế, tài liệu jQuery có cách tiếp cận đơn giản hơn các ví dụ theo chuỗi được hiển thị ở trên (mặc dù chúng sẽ hoạt động tốt):

$("#myElement").unbind('mouseenter mouseleave');

Kể từ jQuery 1.7, bạn cũng có thể sử dụng $.on()và $.off()liên kết sự kiện, vì vậy, để hủy liên kết sự kiện di chuột, bạn sẽ sử dụng đơn giản hơn và gọn gàng hơn:

$('#myElement').off('hover');

Tên sự kiện giả "hover" được dùng làm cách viết tắt của "mouseenter mouseleave" nhưng đã được xử lý khác trong các phiên bản jQuery trước đó; yêu cầu bạn xóa rõ ràng từng tên sự kiện theo nghĩa đen. Sử dụng $.off()bây giờ cho phép bạn bỏ cả hai sự kiện chuột bằng cách sử dụng cùng một tốc ký.

Chỉnh sửa năm 2016:

Vẫn là một câu hỏi phổ biến, vì vậy cần thu hút sự chú ý của @ Dennis98 trong các nhận xét bên dưới rằng trong jQuery 1.9+, sự kiện "hover" đã không được dùng nữa để thay thế cho các lệnh gọi "mouseenter mouseleave" tiêu chuẩn. Vì vậy, khai báo ràng buộc sự kiện của bạn bây giờ sẽ giống như sau:

$('#myElement').off('mouseenter mouseleave');

Hủy liên kết các sự kiện mouseentervà mouseleaveriêng lẻ hoặc hủy liên kết tất cả các sự kiện trên (các) phần tử.

$(this).unbind('mouseenter').unbind('mouseleave');

hoặc là

$(this).unbind();  // assuming you have no other handlers you want to keep

unbind () không hoạt động với các sự kiện nội tuyến được mã cứng.

Vì vậy, ví dụ: nếu bạn muốn hủy liên kết sự kiện di chuột qua khỏi <div id="some_div" onmouseover="do_something();">, tôi thấy rằng đó $('#some_div').attr('onmouseover','')là một cách nhanh chóng và dễ dàng để đạt được điều đó.

Một giải pháp khác là .die () cho các sự kiện gắn với .live () .

Ví dụ.:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

Bạn có thể tìm thấy sự khác biệt tốt ở đây: Khám phá jQuery .live () và .die ()

(Xin lỗi vì tiếng anh của tôi: ">)

Tất cả những gì di chuột đang thực hiện đằng sau hậu trường đều liên kết với thuộc tính di chuột qua và di chuột ra. Tôi sẽ ràng buộc và hủy liên kết các chức năng của bạn khỏi các sự kiện đó một cách riêng lẻ.

Ví dụ: giả sử bạn có html sau:

<a href="#" class="myLink">Link</a>

thì jQuery của bạn sẽ là:

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});

Bạn có thể xóa một trình xử lý sự kiện cụ thể đã được đính kèm bởi on, bằng cách sử dụngoff

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

Sử dụng điều này, bạn sẽ chỉ loại bỏ handlerFunction
Một phương pháp hay khác, là đặt một namespace cho nhiều sự kiện đính kèm

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");

Tôi thấy điều này hoạt động như đối số thứ hai (hàm) cho .hover ()

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

Hàm đầu tiên (đối số cho .hover ()) di chuột qua và sẽ thực thi mã của bạn. Đối số thứ hai là mouseout sẽ hủy liên kết sự kiện di chuột khỏi #yourId. Mã của bạn sẽ chỉ được thực thi một lần.