onBlur() not working properly

Question

I want the <div> with class .shell-pop to be closed if they click out of the element area. It appears not to fire though, and none of the logs or alerts go off either. I've looked around and everything appears right?

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>

what is `.shell-pop`? blur event wont be fired if the element is not an input element — Rajaprabhu Aravindasamy, Mar 22 '16 at 18:58
Shell-pop is a div contain more divs. A lot of the examples i have seen were working with divs, so I'm not sure why that would make it fail to fire. — Hot Java, Mar 22 '16 at 19:02
`blur()` won't work on divs, I believe. See here: http://stackoverflow.com/a/1259769/1231271 — Sam Fen, Mar 22 '16 at 19:03
DOM Level 3 Specification says valid targets include both `Window` and `Element` - so a `div` element is a valid target for a `blur` event (and it works in the test I just ran in Firefox). https://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur — Fenton, Mar 22 '16 at 19:06

scniro · Accepted Answer · 2016-03-22T19:12:10.397

5

Give your <div> a 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.

Observe the following...

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

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

JSFiddle Link - simple demo

edited Mar 22 '16 at 19:12

answered Mar 22 '16 at 19:05

scniro

15,980
8
54
101

1

This allows the element to receive focus, which means it is possible for the blur event to fire. A tabindex of `0` will also make the element keyboard-navigable. – Fenton Mar 22 '16 at 19:07
1

@Sohnee this is true! Thanks, I included a link which explains the different values – scniro Mar 22 '16 at 19:08
Ah, i see. I saw that but assumed it was only for literal tabbing through a page. I shouldn't have assumed and done more research on it. – Hot Java Mar 22 '16 at 19:15

score 1 · Answer 2 · answered Mar 22 '16 at 19:08

1

Blur will only fire on form elements. You should consider a different approach. For example, you could watch for click events on .shell-pop and determine it's current state. Like

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

answered Mar 22 '16 at 19:08

Eihwaz

1,116
9
13

+1, this is generally the preferred way to close an element that is not focusable when clicked outside the element etc. – adeneo Mar 22 '16 at 19:13

onBlur() not working properly

2 Answers2