Есть ли способ избежать события focusout, когда пользователь переключается в совершенно другое окно?

Question

В настоящее время я использую

$('#input').blur(function(){...

, чтобы справиться с потерей фокуса на входе в моем веб-приложении.

В большинстве случаев он работает так, как задумано, кроме Iне хочу, чтобы событие срабатывало, когда пользователь полностью переключается на другое окно. Я заметил, что событие размытия срабатывает, даже когда я переключаюсь на инструменты Chrome Dev. Такое поведение непреднамеренно. Я должен также упомянуть, что использование события focusout дает те же результаты.

В качестве примера того, что я хочу, вы заметите, что если вы ищете что-то в google, то, когда выщелкните мышью вдали от ввода, что приведет к исчезновению предложенных поисков. Однако, если вы нажмете на совершенно другое окно, которое не является вашим браузером, результаты останутся на экране, как если бы фокусировка не была активирована. Есть ли способ сделать это?

Answer 1

К сожалению, размытие ввода является одним из первых срабатываний, прежде чем сработает даже одно или любое событие видимости в окне.

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

let blur_timeout;
window.addEventListener( 'blur', (e) => {
  clearTimeout( blur_timeout ); // cancel the input's timer
} );
document.getElementById( 'inp' ).addEventListener( 'blur', (e) => {
  // wait a bit so we are sure it's not caused by window's blur
  blur_timeout = setTimeout( handleInputBlur, 10 );
} );

function handleInputBlur() {
  console.log( 'input blurred' );
}

<input id="inp">