jQuery khác biệt giữa sự thay đổi và nhấp vào sự kiện của hộp kiểm

Question

Như tiêu đề gợi ý tôi muốn biết sự khác biệt giữa các change và click trường hợp hộp kiểm (trong jQuery)

Tôi đã đọc xuống câu trả lời cho What the difference between .click and .change on a checkbox này

Nhưng, nó không làm việc cho tôi. change bắn ngay cả khi tôi va vào không gian mà không bị mất tập trung.

Dưới đây là fiddle demo

Cả hai dường như hoạt động như nhau. Am i thiếu cái gì ở đây ?

Answer 1

Theo W3C, sự kiện onclick được kích hoạt bởi bàn phím cho mục đích trợ năng:

SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

Để cung cấp trải nghiệm người dùng tốt hơn cho những người không có việc sử dụng một con chuột, các trình duyệt đã được phát triển để cháy, sự kiện onclick ngay cả khi nhấp chuột xảy ra với một bàn phím.

Vì lý do này, sự kiện click của jQuery sẽ kích hoạt ngay cả khi hộp kiểm là nhấp vào bằng cách sử dụng phím cách của bàn phím. change, hiển nhiên, sẽ kích hoạt mỗi khi trạng thái của hộp kiểm thay đổi.

Hộp kiểm chỉ xảy ra là trường hợp đặc biệt nơi change và click là hoán đổi cho nhau, bởi vì bạn không thể cháy, sự kiện change mà không có cũng kích hoạt click.

Tất nhiên, ngoại lệ cho quy tắc này là nếu bạn đã sử dụng javascript để tự thay đổi hộp kiểm, chẳng hạn như:

/* this would check the checkbox without firing either 'change' or 'click' */ 
$('#someCheckbox').prop('checked',true); 

/* this would fire 'change', but not 'click'. Note, however, that this 
    does not change the checkbox, as 'change()' is only the function that 
    is fired when the checkbox changes, it is not the function that 
    does the changing */ 
$('#someCheckbox').trigger('change'); 

/* this would fire 'click', which by default automatically triggers 'change' */ 
$('#someCheckbox').trigger('click'); 

Dưới đây là một cuộc biểu tình của những hành động khác nhau: http://jsfiddle.net/jackwanders/MPTxk/1/

Hy vọng điều này giúp.

Answer 2

Tôi cho rằng thay đổi sẽ kích hoạt khi hộp kiểm thay đổi (ngay cả khi bạn không nhấp vào hộp kiểm). Ví dụ: nếu bạn thay đổi trạng thái của hộp kiểm qua một số chức năng khác.

Answer 3

bạn có thể chọn hoặc bỏ chọn hộp kiểm mà không nhấp vào, bằng cách sử dụng bàn phím (tab và thanh dấu cách) điều này chuyển sang câu lệnh thay đổi nhưng không phải để nhấp. IMHO

Answer 4

Xin vui lòng cho tôi biết nếu điều này không giúp tôi sẽ xóa bài của tôi:

Change: http://api.jquery.com/change/ - Tôi nghĩ thay đổi sự kiện được kích hoạt khi state của nguyên tố này nếu thay đổi ví dụ: không nhấp nhưng thay đổi. Hộp kiểm đã kiểm tra và bỏ chọn trạng thái.

Click: nhấp vào sự kiện là khi bạn nhấp vào phần tử bất kể trạng thái của hộp kiểm là gì.

như trong mã giả

if checkbox state is checked 

    alert(Hulk is awesome); 

if checkbox is click every time 

    alert(Ironman is alright); 

Answer 5

Sự khác biệt tôi có kinh nghiệm là thế này:

var $check = $(':checkbox'); 
$checkbox.checked = true; 
$checkbox.click(function() { 
    alert(this.checked); // true 
}).change(function() { 
    alert(this.checked); // false 
}); 

Vì vậy, với kích nhà nước vẫn chưa thay đổi, với sự thay đổi đó có ...

Answer 6

Sự kiện thay đổi kích hoạt khi trạng thái hộp kiểm đã được thay đổi thông qua bất kỳ sự cố nào xảy ra hoặc qua không gian nhấn khi hộp kiểm được tập trung hoặc kích hoạt sự kiện thay đổi hoặc nhấp vào trường hợp khi sự kiện nhấp chỉ được kích hoạt khi chúng tôi nhấp vào hộp kiểm nhấp chuột nhưng tại thời điểm đó trước khi nhấp vào nếu sự kiện thay đổi đã được chỉ định thì nó cũng chạy và sau đó thực thi sự kiện nhấp chuột.

đây bạn có thể nhìn thấy kịch bản rõ ràng đã được thực hiện trên thùng: http://codebins.com/codes/home/4ldqpbu

Answer 7

Sự khác biệt chính: khi bạn bấm/nhấn không gian trên một hộp kiểm tập trung đầu tiên sự kiện click bị sa thải, không có thay đổi. Tại thời điểm này, bạn vẫn có thể ngăn chặn hành động mặc định (với event.preventDefault()) để chuyển trạng thái checked của hộp kiểm đó và kích hoạt sự kiện change (chưa có hành động mặc định).

Trong một số trình duyệt, sự kiện thay đổi sẽ chỉ kích hoạt sau blur đầu tiên sau click.