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 bee 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.

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 bee 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.

• javascript
• angularjs
• angularjs-directive

• 4 Firefox doesn't support focusin and focusout events – Rahil Wazir Commented Jul 17, 2014 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 Commented Jul 17, 2014 at 17:40
• You can use focus or mouseenter instead of focusin and use blur or mouseout for focusout – Rahil Wazir Commented Jul 17, 2014 at 17:47
• Also, for manipulating the DOM like that you should probably use a directive. – MBielski Commented Jul 17, 2014 at 17:59
• 2 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 Commented Jul 17, 2014 at 18:19

1 Answer 1

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/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
});