如何从 ul li 触发 onblur？

Question

我本质上是在单击时突出显示每个 li，并希望在单击其他地方或跳出时“取消突出显示”单击的 li（通过影响 background-color 属性）。

这种行为本质上是在模仿 <select> 的突出显示行为......不过，我不使用 select，因为我想将 HTML 嵌套在列出的项目中 -- 你不能使用<option>做到这一点。

我正在尝试使用onblur，但它不起作用...

这是 HTML：

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

...这是CSS：

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

Answer 1

既然您已经在使用 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 属性来为其添加焦点功能。

Answer 2

lis 没有blur，因为他们不专注。试试mouseout 或mouseleave。