javascript - 这个点击内容的时候如何不触发onblur事件,从而可以实现跳转与删除，看了网上好像说加个定时器，但是也没有作用-PHP中文网问答

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
        .big{margin-left: 100px}
        .box{width:300px;height:40px;display: inline-block;margin-top: 200px;}
        input{width: 280px;height: 20px;padding:9px 8px 8px;font-size:20px;font-family: Arial;font-weight: normal;display: inline-block;}
        li{list-style: none;line-height: 25px;padding: 0 8px;position:relative;}
        li span{cursor: pointer;width: 80%;display: inline-block;}
        li a{position: absolute;right: 0;width: 20%;text-align: right;}
        .content{width: 298px;height:auto;border: 1px solid #ccc;display: none;}
        .hover{background: #ccc;}
    </style>
</head>
<body>
    <p class="big">
        <span class="box">
            <input type="text" value="" id="btn">
        </span>
        <p class="content" id="content">
            <ul>
                <li class="hover span"><span>百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
                <li><span class="span">百度一下，你就知道</span><a href="" class="delete">删除</a></li>
            </ul>
        </p>
        </p>
    <script type="text/javascript">
        var $=function(id){
            return document.getElementById(id); 
        }
        var btn=$("btn");
        var content=$("content");
        var oLi=content.getElementsByTagName('li');
        var oSpan=document.getElementsByTagName('span');
        btn.onfocus=function(){
            content.style.display='block';
        }
        for(var i=0;i<oLi.length;i++){
            oLi[i].onmouseover=function(){
                for(j=0;j<oLi.length;j++){
                    oLi[j].className='';
                }
                this.className='hover';
            }
            oLi[i].onmouseout=function(){
                this.className='';
            }
        }
        function clock(){
            for(var i=0;i<oLi.length;i++){
                oLi[i].onclick=function(){
                    location.href='http://www.baidu.com';
                }
            }
        }
        btn.onblur=function(){
            setTimeout(function(){
                content.style.display='none';
            },1000)        
        }
        function del(el){
            el.parentNode.parentNode.removeChild(el.parentNode);
        }
        function addEvent(el,type,fn){
            if(el.addEventListener){
                el.addEventListener(type,fn,false);
            }else{
                el.attachEvent('on'+type,fn);
            }
        }
        addEvent(content,'click',function(e){
            var e=e||window.event;
            var target=e.target||e.srcElement;
            switch(target.className){
                case 'span':
                    clock();
                    break;
                case 'delete':
                    del(target);
                    break;
            }
        })
    </script>
</body>
</html>

addEvent(content,'click',function(e){ var e=e||window.event; var target=e.target||e.srcElement; switch(target.className){ case 'span': clock(); location = target.href; break; case 'delete': del(target); break; } })