當孩子獲得焦點時觸發模糊事件

Question

當項目失去焦點時，我需要執行一些操作。

基本上我有這樣的事情：

<div tabindex="1">
    <h1>title 1</h1>
</div>

<div tabindex="2">
    <h1>title 2</h1>

    <textarea></textarea>
</div>

JS：

$('div').blur((e) => { console.log('blur');});

演示

現在，當您在div之間切換時，它就像一個魅力，但是當第二個div具有焦點時，並且您單擊 child-textarea 時會觸發blur事件。 這不是我想要的，因為我們仍然在同一個 div 中。 如何解決此問題，以便在單擊位於 div 之外時僅觸發模糊事件？

Answer 1

一個元素已經被聚焦，那么最后一個被聚焦的元素將觸發事件 'blur'。 您可能需要為它設計一個 hack ......類似於：

$('div').blur((e) => {
    setTimeout(function() {
        if(!$('textarea').is(':focus')){
            console.log('blur');
        }
    }, 100);
});

setTimeout 很重要，因為在第一個然后是焦點事件中觸發了模糊事件。