如何從ul li中觸發onb​​lur？

Question

我基本上是在點擊時突出顯示每個li ，並且想要在單擊其他地方或標記時（通過影響background-color屬性）“取消突出顯示”所點擊的li 。

這種行為本質上是模仿<select>的'突出顯示行為......我不是在使用select ，因為我想在列出的項中嵌套HTML - 你不能用<option>來做 。

我正在嘗試使用onblur ，這是行不通的......

---

這是HTML：

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

......這是CSS：

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

...這里是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

在li ■不要模糊 ，因為他們不專注。 嘗試使用mouseout或mouseleave 。