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

Here is the fiddle with all the code

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

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

这在Chrome和IE浏览器中运行良好，但在Firefox中不行，我无法思考原因。

非常感谢任何帮助。

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

Answer 1

您可以捕获focus / blur个事件（而不是等待冒泡），而不是focusin中的focusout / 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 });个事件。 / p>

示例： Focus's Event_delegation

{{1}}

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

1 个答案: