Focusin和focusout方法无法在firefox中运行

Question

我有一个这样的列表:

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

和一些像这样的JavaScript:

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

这是所有代码的小提琴

基本上,我希望当他们的任何后代有焦点时,第一级列表元素变为红色.我正在听第一级列表元素上的focusin和focusout事件来实现这一点.

将焦点应用于示例中的元素的最佳方法是选择它们.

这在Chrome和IE中运行良好,但在Firefox中没有,我想不出原因.

任何帮助将不胜感激.

如果你想知道为什么我在AngularJS而不是jQuery中这样做,那是因为这段代码是Angular指令的一部分,而这只是不起作用的一点.

Answer 1

您可以捕获focus/ blur事件(而不是等待冒泡)而不是firefox中的focusin/ focusoutevents,如Focus的Event_delegation中的解释

示例: 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
});