javascript – onBlur()无法正常工作

我想要< div>如果他们点击元素区域,则关闭.shell-pop类.它似乎不会触发,也没有任何日志或警报消失.我环顾四周,一切都正常吗？

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>        

解决方法:

给你的< div>一个tabindex.

The tabindex global attribute is an integer indicating if the element
can take input focus (is focusable), if it should participate to
sequential keyboard navigation, and if so, at what position.

请注意以下内容……

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

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

JSFiddle Link – 简单的演示