Javascript:模糊问题

Question

我试图让导航项在点击时变成搜索栏，并在用户点击其他地方时返回到其原始状态。变形进展顺利，但我认为“模糊”将是触发变形的最佳选择，但它不起作用。

标记是这样的:

        <li class="navItem" id="search">Search</li>

和脚本:

function startSearch()
{
    if(!ifSearch)
    {

        var search = document.getElementById("search");
        var form = document.createElement("form");
        var textfield = document.createElement("input");
        var submit = document.createElement("input");

        search.innerHTML = "";

        form.setAttribute("action", "search.php");
        form.setAttribute("method", "get");

        textfield.setAttribute("type", "text");
        textfield.setAttribute("id", "searchfield");
        textfield.setAttribute("name", "searchItem");

        submit.setAttribute("type", "submit");
        submit.setAttribute("id", "subSearch");

        form.appendChild(textfield);
        form.appendChild(submit);

        search.appendChild(form);

        ifSearch = true;

        search.addEventListener("blur",function() {
                  search.innerHTML = '<a>Search</a>';
                  ifSearch = false;
              });

    }
}

var ifSearch = false;

document.getElementById("search").addEventListener("click", startSearch);

“模糊”事件永远不会触发。尝试用 IE 进行“focusout”，二十次中就有一次能成功。不确定发生了什么，所以如果有人能启发我，我将非常感激

Answer 1

焦点和模糊事件不会冒泡。在这种情况下，您需要监听 <input> 上的模糊事件。直接字段。

演示:http://jsfiddle.net/pt38j1en/6/