Вопрос по javascript, onchange, jquery, checkbox – jQuery разница между изменением и событием щелчка флажка

27

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

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

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

Вот этодемонстрация скрипки

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

@ Jashwant это первое приходит на ум первымjsfiddle.net/8RFGn/1 Esailija
click означает нажать на флажок, как и любой другой элемент,change означает, что значение флажка было изменено. Esailija
Но значение будет меняться при каждом нажатии. Так какая разница? Jashwant
Кажется, ты сам ответил на свой вопрос. Mukesh Soni
изменение будет срабатывать всякий раз, когда значение флажка изменяется ... и это может произойти путем: 1. щелчка мышью 2. использования клавиатуры для изменения значения 3. изменения значения программно ... но событие щелчка будет срабатывать только когда вы используете мышь, чтобы щелкнуть или симулировать щелчок мыши программно Mukesh Soni

Ваш Ответ

7   ответов
52

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

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

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

По этой причине jQueryclick событие сработает, даже если флажокclicked с помощью пробела на клавиатуре.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/

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

The checkbox just happens to be the special case where change and click are interchangable, because you can't fire the change event without also triggering click Мне просто нужны были простые и прямые слова, подобные этим. Я подожду некоторое время. Если никто не возражает против ваших слов, у вас будет щедрость. Jashwant
@pozs, дает отличную разницу тоже. Но вы заслуживаете награды за суммирование всего и ссылку w3c для клавиатурыonclick. Jashwant
Эта часть в ответе «Флажок» как раз и является особым случаем, когда изменение и щелчок взаимозаменяемы, потому что вы не можете запустить событие изменения, не вызывая клик. & Quot; правильно по большей части. Тем не менее, пользователи должны отметить, что есть исключения. Как я только что обнаружил, если вы пытаетесь обнаружить ключ, подобный этому, - if (event.shiftKey) - он будет работать только с щелчком, но не с изменением. На всякий случай это кому-нибудь поможет
Есть разница, которую люди, вероятно, должны принять к сведению. Если вы используете IE10 / 11, «изменить» событие не сработает из-за ошибки, если флажок находится в неопределенном состоянии (даже если вы нажмете на него). См ошибкаbountysource.com/issues/… «нажмите» событие будет срабатывать надежно, хотя
0

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

click запускает событие без щелчка мышью :) Jashwant
Я связываю / освобождаюclick а такжеchange событие наcheckbox на каждойclick изbutton, Что в этом плохого? Jashwant
change событие происходит даже с помощью мыши Jashwant
это очень хороший момент. Но, похоже, не удалосьhere Jashwant
0

Событие изменения срабатывает, когда состояние флажка было изменено в зависимости от того, какое событие будет происходить, либо посредством нажатия пробела, когда флажок был установлен, либо Инициируемого события изменения, либо щелчка по событию «Куда как» происходило только тогда, когда мы щелкали по флажку щелчком мыши, но при в это время перед щелчком, если было указано событие change, оно также запускается и затем выполняет событие click.

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

0

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

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

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

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

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);
Я связываю / освобождаюclick а такжеchange событие наcheckbox на каждойclick изbutton, Что в этом плохого? Jashwant
Проверьтеthis . click тоже меняет состояние. Jashwant
@ Jashwant LOL братан, вы обязываетеclick событие с переключателем, а затемunbinding Зачем?:)  == & GT;.unbind('click').bind('change', cb); или же.unbind('change').bind('click', cb); Bazinga?
Да, конечно;change когда государство получает изменения, гдеclick простое событие клика. то есть изменение происходит в состоянии (проверено / не проверено); где, когда щелчок срабатывает, когда пользователь нажимает, позвольте мне знать, если это имеет смысл,
Но вcheckbox, государство будет меняться на каждомclick, Можете ли вы указать контекст, в котором они работают по-разному Jashwant
3

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

6

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

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

Отлично. Обновил мойfiddle заpreventDefault() , При событии щелчка он перестает щелкать, но не при событии проверки, он не прекращает проверку :) Это одно из основных отличий Jashwant
0

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

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

Таким образом, с щелчком состояние еще не изменилось, с изменением оно ...

Этот клик не будет срабатывать через клавиатуру, само собой разумеется
это очень хороший момент. Но, похоже, не удалосьhere Jashwant

Похожие вопросы