Изменение вкладок браузера нежелательно вызывает событие фокуса, особенно в Google Chrome
У меня есть небольшая проблема с фокусным событием, о котором я только что узнал. По-видимому, фокус срабатывает при переключении на другую вкладку браузера, а затем обратно. Я бы предпочел, чтобы этого не случилось; Является ли это возможным?
Я никогда не знал об этом до сегодняшнего дня. Вот небольшая демонстрация: http://jsfiddle.net/MJ6qb/1/
var times = 0;
$('input').on('focus', function() {
times ++;
$(this).after('<br>Focused '+times+' times');
});
Воспроизведение. Сосредоточьтесь на входе, затем переключите вкладки браузера, затем переключитесь обратно. Кажется, что все браузеры запускают фокусное событие, когда вы переключаетесь на вкладку, и Google Chrome 19 стреляет дважды !
В идеале функция не должна запускаться при переключении вкладок браузера, но только при нажатии на пользователя или Tab, но теперь, когда я знаю о проблеме Chrome, я немного больше обеспокоен этим, потому что это приводит к лишней ненужной обратной -to-back AJAX в моем реальном приложении (это для получения результатов для автозаполнения, которое должно быть актуальным, но не настолько, что я хочу использовать событие keyup).
Это не похоже на jQuery (я тестировал с помощью javascript), но я могу использовать jQuery для решения. Есть ли что-нибудь, что я могу сделать по этому поводу? Я знаю, что могу использовать jQuery one()
но я хочу, чтобы функция запускалась более одного раза.
Ответы
Ответ 1
Попробуйте это
var times = 0;
var prevActiveElement;
$( window ).on( "blur", function(e){
prevActiveElement = document.activeElement;
});
$('input').on('focus', function() {
if (document.activeElement === prevActiveElement) {
return;
}
prevActiveElement = document.activeElement;
times++;
$(this).after('<br>Focused ' + times + ' times');
}).on( "blur", function(){
prevActiveElement = null;
});
Ответ 2
Попробуйте это, чтобы решить проблему:
var times = 0, foc=true;
$(window).on('focus', function() {
foc = false;
setTimeout(function() {foc=true}, 200);
});
$('input').on('focus', function() {
if (foc || times===0) {
times ++;
$(this).after('<br>Focused '+times+' times');
}
});
FIDDLE