jQuery MouseUp không bắn sau khi kéo ra khỏi liên kết

Question

Xem jsfiddle này:

http://jsfiddle.net/CB87X/6/

Bấm và giữ nút, kéo ra khỏi nút và phát hành. Như bạn có thể thấy, sự kiện mouseup không bao giờ kích hoạt nếu con chuột không nằm trên phần tử khi nút chuột được nhả ra. Do đó, kiểu dáng trong ví dụ của tôi không bao giờ thay đổi về bản gốc. Làm thế nào để bạn kích hoạt sự kiện mouseup nếu nút chuột được nhả ra khi không nằm trên phần tử được nhấp?

Chỉnh sửa1: BTW Tôi đã xem xét một số giải pháp trên trang web này, triển khai chúng và sự kiện di chuột vẫn không kích hoạt.

Answer 1

Sự kiện mouseup liên quan đến vị trí của con trỏ và hành vi được mong đợi này. Nếu bạn muốn nút của mình được tạo kiểu đúng cách, hãy liên kết sự kiện mouseleave.

Answer 2

Forked dụ bạn để cung cấp một ví dụ làm việc:

http://jsfiddle.net/67Rrs/2/

Khi nút là mousedown ed, một sự kiện được ràng buộc với tiếp theo mouseup, bất cứ nơi nào nó xảy ra, mà reset phong cách.

Answer 3

Điều này cần thực hiện thủ thuật. Nếu bạn nhấp chuột trái vào nút (.but) và kéo ra, bạn có thể mouseup ở bất kỳ đâu trên trang và vẫn kích hoạt sự kiện nhấp chuột. Nếu bạn mouseleave trang 'nội dung' và mouseup, sự kiện bind ed mouseleave là unbind ed.

$('.but').mousedown(function(e) { 
    if (e.which == 1) { 
     var $this = $(this); 
     $this.bind('mouseleave', function(){ 
      $('body').one('mouseup', function() { 
       $this.click(); 
      }); 
     }); 
     $this.mouseup(function() { 
      $(this).unbind('mouseleave'); 
     }); 
    } 
});