Question

我在我的应用中使用bootstrap，less和jQuery。我想问你关于元素的重点。

所以我有一个使用ul li个锚点创建的项目列表。我做了一个代码，使锚点在点击时着色，并清除模糊的颜色。问题是当用户点击身体的任何地方时，锚点的焦点就会被他自己清除。

你知道它背后的问题是什么吗？

Answer 1

这是预期的行为。但是，如果出于某种原因，您想要在非焦点元素上点击body上的任何位置时保持焦点元素，则可以使用以下代码段：

//include IIFE if not already including jQuery UI
(function () {
    function focusable(element, isTabIndexNotNaN) {
        var map, mapName, img,
        nodeName = element.nodeName.toLowerCase();
        if ("area" === nodeName) {
            map = element.parentNode;
            mapName = map.name;
            if (!element.href || !mapName || map.nodeName.toLowerCase() !== "map") {
                return false;
            }
            img = $("img[usemap='#" + mapName + "']")[0];
            return !!img && $(img).is(':visible');
        }
        return (/^(input|select|textarea|button|object)$/.test(nodeName) ? !element.disabled :
            "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) &&
        // the element and all of its ancestors must be visible
        $(element).is(':visible');
    }
    $.extend($.expr[":"], {
        focusable: function (element) {
            return focusable(element, !isNaN($.attr(element, "tabindex")));
        }
    });
})();

$(':focusable').on('blur', function (e) {
    //using a timeout to put logic in event queue
    setTimeout(function () {
        if (!$(document.activeElement).is(':focusable')) this.focus();
    }.bind(this), 0);
});

/* for demo purpose only*/
a:focus {
    color: red;
    outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">anchor with href (focusable)</a>
<br/>
<a>anchor without href (unfocusable)</a>
<br/>
<input placeholder="input (focusable)" />
<div>div without tabindex (unfocusable)</div>
<div tabindex="0">div with tabindex (focusable)</div>
<div tabindex="-1">div with tabindex negative (focusable but untabbable)</div>

单击身体后为什么要清除焦点

1 个答案: