Question

如果点击了元素区域，我希望<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>

Answer 1

将<div> tabindex提出来。

tabindex全局属性是一个整数，表示该元素如果它应该参与，可以采取输入焦点（可聚焦）顺序键盘导航，如果是，在什么位置。

请注意以下内容......

<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（）无法正常工作

2 个答案: