如何从 ul li 触发 onblur 事件？

Question

当点击每个li时，我会将其突出显示，并希望在单击其他位置或切换标签时“取消突出显示”所单击的li(通过影响background-color属性)。

这种行为实际上是在模拟<select>中的突出显示行为... 我没有使用select，因为我想嵌套HTML在列出的项中 - 你不能使用<option>实现这一点。

我试图使用onblur，但它不起作用...

以下是HTML代码：

<ul id = "list">
    <li>asdf</li>
    <li>qwerty</li>
<ul>

    #list {
        list-style-type: none;
    }

以下是jQuery/Javascript代码：

    function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement; 
    }

    function highlightSelection(selection) {
        alert("It worked!");
        $(selection).css("background-color","#FFFF00");
    }

    // this function is not being triggered:
    function removeHighlight(selection) {
        $(selection).css("background-color","none");
    }

    var ul = document.getElementById("list");

    ul.onclick = function(event) {
        var target = getEventTarget(event);
        highlightSelection(target);
    };

    // this event is not working:
    ul.onblur = function(event) {
        var target = getEventTarget(event);
        removeHighlight(target);
    };

- Ian Campbell

Answer 1

不会 模糊，因为它们没有焦点。请尝试使用 mouseout 或 mouseleave。

- Dek Dekku

---

感谢@Dek Dekku的快速回复，是否有可能将焦点设置在点击的“li”上？ - Ian Campbell

现在我仔细看了一下，你实际上是在 ul 上设置了监听器。 - Dek Dekku

好的，我差不多搞定了——将属性 tabindex = "1" 添加到 ul，或者任何整数分配，都会使 li 获得焦点。然而，这个技巧并不能只允许一个 li 被突出显示。 - Ian Campbell

从highlightSelection调用removeHighlight方法以删除先前选定项上的高亮，然后将其设置为新目标。 - Dek Dekku

再次感谢@Dek Dekku，您是指从“removeHighlight”方法访问先前分配的“target”变量吗？ - Ian Campbell

是的，你可以保存它（我猜现在一个全局变量就可以了，但用闭包保护作用域会更好），然后调用它的方法。否则，重写remove方法以从所有“li”中删除类，而不仅仅是目标：这样效率可能会降低，但更加健壮。 - Dek Dekku

Answer 2

既然您已经在使用 JQuery ...

<ul id = "list">
     <li tabindex="1">asdf</li>
     <li tabindex="2">qwerty</li>
 <ul>


var ul = $("#list");
ul.on('click focus','li',function(){
    $(this)
        .css("background-color","#FFFF00")
        .siblings().css('background','');
}).on('blur','li',function(){
    $(this).css('background','');
});

http://jsfiddle.net/mc4tN/2/

当您从一个列表项切换时，我不确定您想要什么效果...看起来您只是想保留它的高亮状态。您可以通过给列表项添加tabindex属性来使其获得焦点。

- bluetoft

---

太棒了，谢谢@Bluetoft！我该如何使用addClass和removeClass来代替css实现这个功能呢？ - Ian Campbell

好的，没事了 -- $(this).addClass("highlighted").sibling().removeClass("highlighted"); 在 ul.on('click focus'...) 的内容中，其中 "highlighted" 是一个 CSS 类。 - Ian Campbell