onBlur（）が正しく機能していない

Question

の<div>をエレメントエリアをクリックすると閉じられるようにします。それは発火しないように見え、ログやアラートのいずれも消えません。私は周りを見回して、すべてが正しいように見える？

jQueryの

$('document').ready(function() { 
    updateCart(); 

    $(".shell").click(function (e) { 
     e.preventDefault(); 
     $(".shell-pop").fadeIn(300, function() { $(this).focus(); }); 
    }); 

    $(".shell-pop").on('blur', function() { 
     $(this).fadeOut(300); 
     window.alert("work"); 
     console.log("works"); 
    }); 
}); 

HTML

<div class="options-area"> 
    <div class="options-popup shell-pop"> 
     <div class="swatches"> 
      <div class="colors-shell colors" id="green"> 
       <p class="prices-for-swatch">$14.23</p> 
      </div> 
      <div class="colors-shell colors" id="pink"> 
       <p class="prices-for-swatch">$7.23</p> 
      </div> 
      <div class="colors-shell colors" id="blue"> 
       <p class="prices-for-swatch">$11.25</p> 
      </div> 
      <div class="colors-shell colors" id="orange"> 
       <p class="prices-for-swatch">$10.23</p> 
      </div> 
      <div class="colors-shell colors" id="default-shell"> 
       <p class="prices-for-swatch">FREE</p> 
      </div> 
      <div class="colors-shell colors" id="exit"> 
       <img src="img/Silhouette-x.png" class="x-logo" alt="exit" /> 
       <p class="closeit">CLOSE</p> 
      </div> 
      <div class="shell square"> 
       <img src="img/controllers.png" class="item-icon" alt="controller-piece"> 
       <p class="name-of-item">Shell</p> 
       <p id="shell_Price1" class="items-price">0.00</p> 
      </div>   

Answer 1

はあなたの<div>tabindexを与えます。

のtabIndexグローバル属性は、要素 それは シーケンシャルキーボードナビゲーションに参加する必要がある場合、入力フォーカス（フォーカス可能である）をとり、そしてもしそうであれば、どのような位置にすることができるかどうかを示す整数です。

次...

<div tabindex="-1"></div> 

---

$('div').on('blur', function() { 
    console.log('blurrr'); 
}); 

JSFiddle Link守って - フォーム要素の簡単なデモ

Answer 2

ぼかしますのみ火を。あなたは別のアプローチを考慮する必要があります。たとえば、.shell-popのクリックイベントを監視し、現在の状態を判断できます。 Like

$(document).on('click', function(e){ 
    if ($(e.target).is('.shell-pop')) { 
     alert('focused'); 
    } else { 
     alert('blured'); 
    } 
});