2013-07-30 2 views
1

HTMLJQuery UI срабатывает событие нажмите дважды на нажатие клавиши

<button id="clickMe" tabindex=0>Click Me!</button> 

JS

$('#clickMe').button(); 
$('#clickMe').click(function() { 
    alert('hey'); 
}); 

$(document).keypress(function (e) { 
    var key = e.keyCode ? e.keyCode : e.which; 
    //detect when the user has hit enter 
    if (key == 13) { 
     //click the focused element 
     $(document.activeElement).click(); 
    } 
}); 

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

Demonstration

EDIT: вкладка + введите не работает вообще в IE 10

ответ

7

Поскольку нажать "Enter", когда фокус находится на кнопку вызывает "щелчок" событие изначально. Вы также получите событие «keypress», и из этого вы снова вызываете событие «click».

+3

Интересно, стоит ли нам рассказать им об e.preventDefault() и e.stopPropagation() ;-) –

+0

@JohnMacIntyre. Прежде всего, нужно выяснить, происходит ли нажатие клавиши до или после щелчка. Я думаю, что это происходит раньше, и тогда тогда '.preventDefault()' будет хитростью (в обработчике «keypress»). – Pointy

+0

Небольшое добавление: это верно для IE (протестировано в IE11, с включенным режимом совместимости с IE9), но не в Firefox или Chrome, где не было нажато событие click on enter, что делает ручную привязку необходимого ключа. –

0

Я отвечаю здесь на комментарий Уэнси вместо комментариев из-за нехватки места;

Я могу подтвердить, что я вижу, как срабатывает клик в JSbin, но я не уверен, как объяснить разницу между поведением моего реального кода приложения и тем, что на странице. Возможно, это связано с тем, что я привязал свой «клик» к отдельной строке, а не привязал ее.

Я еще не научился использовать JSBin, но я торжественно обещаю сделать это в ближайшее время. Тем не менее, моя информация пришла из экспериментов в моем собственном коде:

$(settings.selectors.patientSearchSubmitButton).click(validatePatientSearch); 

последовало

$(settings.selectors.patientSearchSubmitButton).click(alertOnClick); 

Я также имел другое связывание:

 $(settings.selectors.patientSearchParameter).keypress(function (e) { 

      if (e.which == 13) {//Enter key pressed 
       validatePatientSearch(); 
      } 
     }); 

patientSearchParameter было поле рядом с кнопкой , Когда я сосредоточился на поле и нажал «enter» в chrome, ff, plain IE11, функция validatePatientSearch выполнялась один раз, а функция alertOnClick не запускалась. Когда я сделал то же самое в режиме совместимости IE11 для IE8, 9, 10; функция выполнялась дважды, и был вызван alertOnClick. Я не уверен, как я могу это доказать, но это был мой опыт, и это было повторное поведение более чем через 20 или около того тестов. Я использую 64-разрядную версию Windows 7. Не уверен, что еще может заставить его вести себя таким образом, но я надеюсь, что это может быть полезно кому-то.

Может быть, потому что мой клик был привязан к кнопке, а не к полю?

Смежные вопросы