hành vi kỳ lạ với preventDefault() và đài phát thanh nút

Question

Xem jsFiddle này:

http://jsfiddle.net/nathanfriend/vAcpc/9/

Dường như phương pháp preventDefault() không ngăn cản các nút radio nhấp từ chuyển đổi qua lại (chú ý rằng thông điệp luôn nói "Nút radio này đã được chọn", bất kể trạng thái trước đó của nó). Tuy nhiên, sau khi phương thức onclick() kết thúc, các nút radio quay trở lại trạng thái ban đầu của chúng (ngoại trừ lần đầu tiên nút radio được chọn).

Dường như preventDefault() hoạt động không thực sự ngăn chặn nút radio được kiểm tra, mà thay vì chỉ trả lại tập hợp các nút về trạng thái trước đó của chúng. Bất cứ ai có thể giải thích hành vi này? Tôi muốn có thể hoàn toàn ngăn chặn nút radio không bao giờ được bật - theo cách này tôi có thể kiểm tra chính xác xem nút radio đã được kiểm tra trong phương thức onclick() của nó hay chưa. Bất kỳ ý tưởng?

Answer 1

Thực tế, sự kiện mousedown sẽ được kích hoạt trước và kiểm tra nút radio của bạn. Bạn có thể dễ dàng xác minh điều này bằng cách giữ nút chuột trên nút radio. Tuy nhiên, hầu như tất cả các phần tử GUI chỉ được thực thi hoặc thay đổi nếu cả hai mousedown và mouseup được kích hoạt và chạy thành công.

Xem ví dụ này (demo):

$(function() { 
    $('[name="test"]').each(function() { 
     $(this).mousedown(function(e) { 
      e.preventDefault(); 
      if ($(this).is(':checked')) { 
       alert('This radio button was checked in mousedown');     
      } else { 
       alert('This radio button was not checked in mousedown'); 
      }      
     }); 
     $(this).click(function(e) { 
      e.preventDefault(); 
      if ($(this).is(':checked')) { 
       alert('This radio button was checked'); 
      } else { 
       alert('This radio button was not checked'); 
      }      
     }); 
    });   
}); 

Như bạn có thể thấy mousedown bị sa thải đầu tiên, và nó sẽ cảnh báo 'nút radio này đã không được kiểm tra trong mousedown'. Sự kiện click bị ngăn chặn do sự kiện thực sự mouseup bị cảnh báo khó chịu hủy. Tuy nhiên, nếu bạn sử dụng console.log, bạn sẽ nhận thấy rằng click vẫn được thực thi và nút radio vẫn được kiểm tra hầu như.

Tuy nhiên, nếu bạn check for active radio buttons bạn sẽ nhận thấy rằng không có hoạt động nào. Các hành vi của click yếu tố đôi khi gây khó chịu, nhưng e.preventDefault() sẽ làm công việc của nó, đừng lo lắng.