Focusin and focusout methods not working in firefox

Question

I have a list like this:

<ul class="tabs-dropdown">
    <li><a href="/home">Home</a></li>

    <li>
        <a href="javascript:">French Alps</a>
        <div>
            <ul>
                <li><a href="/region/french-alps/about">About</a></li>
                <li><a href="/region/french-alps/properties">Properties</a></li>
            </ul>
        </div>
    </li>

    <li>
        <a href="javascript:">Swiss Alps</a>
        <div>
            <ul>
                <li><a href="/region/swiss-alps/about">About</a></li>
                <li><a href="/region/swiss-alps/properties">Properties</a></li>
            </ul>
        </div>
    </li>

    <li><a href="/finance">Finance</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>

and some javascript like this:

var element = angular.element(document.querySelector('ul'));

element.children().on('focusin', function () {
    angular.element(this).addClass('focused');
}).on('focusout', function () {
    angular.element(this).removeClass('focused');
});

Here is the fiddle with all the code

Basically, I want the first level list elements to become red when any of their descendents have focus. I am listening for the focusin and focusout events on the first level list elements to achieve this.

The best way to apply focus to the elements in the example is to tab to them.

This works fine in Chrome and IE but not in Firefox and I can't think why.

Any help would be greatly appreciated.

If you are wondering why I am doing this in AngularJS and not jQuery, its because this code is part of an Angular directive and this is just the bit that doesn't work.

Firefox doesn't support [`focusin`](https://developer.mozilla.org/en-US/docs/Web/Events/focusin#Browser_compatibility) and [`focusout`](https://developer.mozilla.org/en-US/docs/Web/Events/focusout#Browser_compatibility) events — Rahil Wazir, Jul 17 '14 at 17:28
Ah okay. Thanks for the answer. Do you know of any way to emulate this behavior or is it just something I should accept I can't do? — Ben Guest, Jul 17 '14 at 17:40
You can use `focus` or `mouseenter` instead of `focusin` and use `blur` or `mouseout` for `focusout` — Rahil Wazir, Jul 17 '14 at 17:47
Also, for manipulating the DOM like that you should probably use a directive. — MBielski, Jul 17 '14 at 17:59
@Rahil, No, the `focus` and `blur` events don't bubble to parent elements. — runTarm, Jul 17 '14 at 18:06
Yes this code is part of a directive, I just took it out for the example. And yes @runTarm you are right, I can't just use focus and blur as I need the event to bubble from the anchor element up to its parent `
@runTarm Yes thats why I've mentioned `mouseenter` and `mouseleave` — Rahil Wazir, Jul 17 '14 at 18:15
How are mouse events similar to focus / blur events? This code is being used to show sub-lists when the user focuses on a parent list element by tabbing to it. Mouse events are all done in CSS using the :hover pseudo selector. — Ben Guest, Jul 17 '14 at 18:19

score 5 · Accepted Answer · answered Jul 17 '14 at 18:03

5

You could capture the focus/blur events (not wait for bubbling) instead of focusin/focusout events in firefox like explain in Focus's Event_delegation

Example: http://jsfiddle.net/Zcq8F/1/

var ulElem = angular.element(document.querySelector('ul'));
angular.forEach(ulElem.children(), function (node) {
    var elem = angular.element(node);

    node.addEventListener('focus', function () {
        elem.addClass('focused');
    }, true); // useCapture = true

    node.addEventListener('blur', function () {
        elem.removeClass('focused');
    }, true); // useCapture = true
});

answered Jul 17 '14 at 18:03

runTarm

11,537
1
37
37

I don't think this will work as I want to apply the focused class to the list element not the anchor element. The anchor element is the element that will receive focus. I then want the event to bubble up to it's parent `
` where I can listen for the event and apply the focused class.

Ben Guest

Jul 17 '14 at 18:13

Oh no I stand corrected. I didn't see your example link. Thanks for the code! – Ben Guest Jul 17 '14 at 18:21

Please note that this might not work in IE8 and below, if you also want to support them please see: http://stackoverflow.com/a/17249184/867480 – runTarm Jul 17 '14 at 18:28

That's okay, I gave up support for IE8 and under a while ago. – Ben Guest Jul 17 '14 at 18:46

Focusin and focusout methods not working in firefox

1 Answers1