javascript - 事件执行顺序问题-PHP中文网问答

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    p{
        border:1px solid #666;
        width:244px;
        display:none;
    }
    a, a:link, a:visited,a:active{
    text-decoration:none;
    color:#666;
} 
     span{
        border-bottom:1px dashed #eee;
        padding-left:14px;
     }
     ul{
        display:inline;
        list-style:none;
        padding:0px;
        background-color:white;
     }
     ul li{
        cursor:pointer;
        color:#666;
        padding-left:14px;
        padding-top:3px;
        padding-bottom:3px;
     }
     p ul li:hover{
        background-color:#ddd;
     }
     a{
        text-decoration:none;
     }
       a:hover{
        color:#000;
       }
    </style>
</head>
<body>
    <input type="text" id="a">
    <p id="b">
    <span>大家正在搜</span>
    <ul>
      <li><a href="https://www.baidu.com/">奇妙的朋友</a></li>
      <li><a href="https://www.baidu.com/">快乐大本营</a></li>
      <li><a href="https://www.baidu.com/">天天向上</a></li>
      <li><a href="https://www.baidu.com/">我是歌手</a></li>
      <li><a href="https://www.baidu.com/">中国好声音</a></li>
    </ul>
  </p>
</body>
<script type="text/javascript">
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    a.onfocus=function() {
        b.style.display="block";
    }
    a.onblur=function(){
        b.style.display="none";
    }
</script>
</html>

这样写就不能点击链接跳转了，我是想实现新浪网上
link新浪首页上方的那个搜索框的效果的，查了查好像是事件冒泡有关的，不是很懂，不知道大家有什么好的建议没，谢谢

var a=document.getElementById("a"); var b=document.getElementById("b"); var doc=document.getElementsByTagName("html")[0]; a.onfocus=function() { b.style.display="block"; } a.onclick=function(e){ e.stopPropagation(); } doc.onclick=function(){ b.style.display="none"; }

全部回复(4)

大家讲道理2017-04-10 15:04:57 4楼

赞 +0

添加回复

黄舟2017-04-10 15:04:57 3楼

要解决这个问题很简单..你只要仿得更彻底一点，做一个slideToggle动画就可以了。
具体分析:
当有input处于focus状态时，点击页面其它元素，会先触发input元素的blur事件并回调其事件处理器，然后在触发其它元素的事件。
证据！
HTML

<input type="text" id="input">
<button id="click">click</button>

document.getElementById('input').onblur = function () {
    console.log("blur");
};
document.getElementById('click').onclick = function () {
    console.log("click");
};

console输出:
blur
click

所以你的链接点击不会跳转是因为先触发了blur，点击事件触发前执行了b.style.display = none

现在你应该知道为什么slideToggle隐藏可以点击跳转了吧~

解决方法有很多，介绍一种逻辑上的正确处理方案：无法触发点击事件就自己trigger

a.onblur = function(){
    b.style.display="none";
    event = document.createEvent("HTMLEvents");
    event.initEvent("click", true, true);
    test.dispatchEvent(event);
}

ringa_lee2017-04-10 15:04:57 2楼

因为新浪那边不是a哦，他是一堆p，绑定了点击然后跳转哦

怪我咯2017-04-10 15:04:57 1楼

正如你所说，我看了一下新浪的写法。

加一个setTimeout。

 a.onblur=function(){
    window.setTimeout(function(){
       b.style.display="none";
    },100)     
    }

要比给整个doc加事件好。