onBlur() 无法正常工作答案

【问题标题】：onBlur() not working properlyonBlur() 无法正常工作
【发布时间】：2019-09-29 20:03:10
【问题描述】：

我希望 <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>

【问题讨论】：

什么是.shell-pop？如果元素不是输入元素，则不会触发 blur 事件
Shell-pop 是一个包含多个 div 的 div。我见过的很多例子都在使用 div，所以我不确定为什么会导致它无法触发。
blur() 不会在 div 上工作，我相信。见这里：stackoverflow.com/a/1259769/1231271
DOM Level 3 Specification 说有效目标包括Window 和Element - 所以div 元素是blur 事件的有效目标（它在我刚才的测试中有效在 Firefox 中运行）。 w3.org/TR/DOM-Level-3-Events/#event-type-blur

标签： javascript jquery html dom onblur

【解决方案1】：

给你的<div> 一个tabindex。

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

请注意以下...

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

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

JSFiddle Link - 简单演示

【讨论】：

这允许元素接收焦点，这意味着可能会触发模糊事件。 0 的 tabindex 也会使元素键盘导航。
@Sohnee 这是真的！谢谢，我提供了一个解释不同值的链接
啊，我明白了。我看到了，但认为这只是为了在页面上进行文字标签。我不应该假设并对此进行更多研究。

【解决方案2】：

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

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

【讨论】：

+1，这通常是关闭在元素外部单击时无法聚焦的元素等的首选方式。