Избегайте потери фокуса у детей

Question

Не стесняйтесь редактировать заголовок вопроса, если найдете что-то лучшее.

---

Я пишу немного плагин для моего сайта,

var main = document.getElementById("main"), 
 
    fakeInput = document.getElementById("fakeInput"), 
 
    zone = document.getElementById("zone"), 
 
    input = document.getElementById("input"); 
 

 
main.addEventListener("focusin", function() { 
 
    zone.style.display = "block"; 
 
}); 
 
main.addEventListener("focusout", function() { 
 
    zone.style.display = "none"; 
 
});

#main { 
 
    width: 200px; 
 
} 
 
#fakeInput { 
 
    background: blue; 
 
    height: 22px; 
 
} 
 
#zone { 
 
    background-color: red; 
 
    height: 100px; 
 
    text-align: center; 
 
}

click in the blue zone :<br> 
 
<div id="main" tabindex="-1"> 
 
    <div id="fakeInput"></div> 
 
    <div id="zone" style="display:none"> 
 
    <p>Click in the input :</p> 
 
    <input id="input" type="text" /> 
 
    </div> 
 
</div>

, когда я нажимаю на него, он открывается (отлично!). Я могу щелкнуть (почти) в любом месте, событие «focusout» не запускается. Практически, поскольку входной ребенок крадет фокус на родителя.

Я прочитал здесь: http://www.quirksmode.org/dom/events/blurfocus.html

focusin и focusout

Пожар в то же время, как фокус и размытия, но пузырь

В моем примере, кажется что событие focusin поля ввода никогда не достигает своего родителя.

Я ищу способ исправить это, любые подсказки?

Answer 1

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

Поэтому есть разница между этим.

main.addEventListener("focusin", function() { 
    zone.style.display = "block"; 
}); 
main.addEventListener("focusout", function() { 
    zone.style.display = "none"; 
}); 

И это.

main.addEventListener("focus", function() { 
    zone.style.display = "block"; 
}); 
main.addEventListener("blur", function() { 
    zone.style.display = "none"; 
}); 

См. Это JSFiddle.

Answer 2

В моем примере Кажется, что событие focusin поля ввода никогда не достигает своего родителя.

На самом деле это так. Попробуйте добавить некоторые отладки:

main.addEventListener("focusin", function(event) { 
    console.log('focusin', event.target) 
    zone.style.display = "block"; 
}); 
main.addEventListener("focusout", function(event) { 
    console.log('focusout', event.target) 
    zone.style.display = "none"; 
}); 

и вы увидите