Подтвердить что ты не робот

Разница jQuery между изменением и событием клика флажка

В качестве заголовка я хочу узнать разницу между событием change и click флажка (в jQuery)

Я прочитал ответ на этот В чем разница между .click и .change на флажке

Но это не работает для меня. change срабатывает, даже когда я ударяю пробелы, не теряя фокуса.

Здесь демонстрацию скрипта

Оба, похоже, работают одинаково. Я что-то пропустил?

4b9b3361

Ответ 1

Согласно W3C, событие onclick запускается клавиатурой в целях доступности:

SCR35: обеспечение доступа к клавиатуре действий с помощью события привязки и кнопок onclick

Для обеспечения лучшего взаимодействия с пользователями без использования мыши были разработаны браузеры для onclick события onclick даже если щелчок происходит с клавиатуры.

По этой причине событие click jQuery будет срабатывать даже в том случае, если флажок установлен с помощью клавиши пробела клавиатуры. change, очевидно, будет срабатывать каждый раз, когда меняется состояние флажка.

Флажок как раз и является особым случаем, когда change и click взаимозаменяемы, потому что вы не можете запустить событие change не вызвав также click.

Конечно, исключением из этого правила является то, что вы должны использовать javascript для ручного изменения флажка, например:

/* 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 change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

Вот демонстрация этих разных действий: http://jsfiddle.net/jackwanders/MPTxk/1/

Надеюсь это поможет.

Ответ 2

Основное отличие: когда вы нажимаете/ударяете место на сфокусированном флажке, сначала запускается событие click, без изменений. На этом этапе вы все равно можете предотвратить действие по умолчанию (с event.preventDefault()), которое должно было бы переключить состояние checked этого флажка и запустить событие change (которое не получило действия по умолчанию).

В некоторых браузерах событие изменения будет срабатывать только после первого blur после click.

Ответ 3

Я бы предположил, что изменение меняется при изменении флажка (даже если вы не нажмете на него). Например, если вы измените состояние флажка с помощью какой-либо другой функции.

Ответ 4

вы можете установить флажок или снять флажок без щелчка, используя клавиатуру (вкладки и пробелы), это означает, что вы можете изменить оператор, но не щелкнуть. ИМХО

Ответ 5

Пожалуйста, дайте мне знать, если это не поможет, я удалю сообщение:

Change: http://api.jquery.com/change/ - Я считаю, что событие изменения срабатывает, когда state элемента, если он изменен, т.е. не нажат, но изменилось. Флажок отмечен и не установлен.

Click: событие click, когда вы нажимаете элемент, не имеет значения, каково будет состояние этого флажка.

как в псевдокоде

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);

Ответ 6

Разница, которую я испытал, такова:

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

Итак, щелкнув, состояние еще не изменилось, с изменением оно...

Ответ 7

Смена события срабатывает, когда статус флажка был изменен в зависимости от того, какое возникновение произойдет либо при нажатии пробела, когда был установлен флажок, либо в поле "Запущенное изменение", либо нажата. Где, когда событие Click было запущено, только когда мы нажали на флажок с помощью мыши щелкните, но в это время перед щелчком, если событие изменения указано, оно также запускается и затем выполняет событие click.

Здесь вы видите прозрачный script был выполнен на ящиках: http://codebins.com/codes/home/4ldqpbu