Javascript 如何从ul li触发onblur？

我基本上是在单击时高亮显示每个li，并希望在单击其他位置时取消高亮显示已单击的li，或通过影响“背景色”属性进行切换。 这种行为本质上是模仿其“突出显示行为…”。。。但我没有使用select，因为我想将HTML嵌套在列出的项目中，而不能使用它。 我正在尝试使用onblur，但它不起作用。。。 以下是HTML：

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

…下面是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);
    };

---

lis没有，因为他们没有集中注意力。尝试使用mouseout或mouseleave。

因为您已经在使用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','');
});

---

我不确定当您从列表项中删除选项卡时想要什么效果。。。看起来你只想突出显示它。您可以通过为列表项提供tabindex属性来为列表项添加焦点功能。

感谢@Dek Dekku的快速回复，可以将焦点设置在单击的li上吗？现在我看起来好多了，您实际上是在ul上设置了侦听器。好的，我几乎就成功了-将属性tabindex=1添加到ul，或者任何整数赋值，将给李的重点。但是，此技巧不允许一次只突出显示一个li。从highlightSelection调用removeHighlight方法以删除先前选择的项目上的突出显示，然后将其设置到新目标上。是的，您可以保存它。我想现在可以使用全局变量，但是用闭包保护作用域会更好，并在其上调用方法。否则，重写remove方法，将类从所有lis中移除，而不仅仅是从目标中移除：这样效率更低，但更安全。太棒了，谢谢@Bluetoft！我如何使用addClass和removeClass而不是css来实现这一点？好的，没关系，我得到了-$this.addClasshighlighted.sibling.removeClasshighlighted；在ul的内容中，点击焦点。。。相反，突出显示的是一个CSS类。

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