onBlur() 无法正常工作

Question

我希望 <div> 和 class .shell-pop 在点击元素区域外时关闭。它似乎没有触发，并且 none 的日志或警报也消失了。我环顾四周，似乎一切正常？

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">.23</p>
            </div>
            <div class="colors-shell colors" id="pink">
                <p class="prices-for-swatch">.23</p>
            </div>
            <div class="colors-shell colors" id="blue">
                <p class="prices-for-swatch">.25</p>
            </div>
            <div class="colors-shell colors" id="orange">
                <p class="prices-for-swatch">.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。

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 - 简单演示

Answer 2

Blur 只会在表单元素上触发。您应该考虑一种不同的方法。例如，您可以观察 .shell-pop 上的点击事件并确定它的当前状态。喜欢

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

onBlur() 无法正常工作

onBlur() not working properly

html

javascript

jquery

dom

onblur