事件执行顺序问题
<!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">
div{
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;
}
div ul li:hover{
background-color:#ddd;
}
a{
text-decoration:none;
}
a:hover{
color:#000;
}
</style>
</head>
<body>
<input type="text" id="a">
<div 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>
</div>
</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新浪首页上方的那个搜索框的效果的，查了查好像是事件冒泡有关的，不是很懂，不知道大家有什么好的建议没，谢谢
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
要解决这个问题很简单..你只要仿得更彻底一点，做一个slideToggle动画就可以了。
具体分析:
当有input处于focus状态时，点击页面其它元素，会先触发input元素的blur事件并回调其事件处理器，然后在触发其它元素的事件。
证据！
HTML
JS
console输出:
blur
click
所以你的链接点击不会跳转是因为先触发了blur，点击事件触发前执行了b.style.display = none
现在你应该知道为什么slideToggle隐藏可以点击跳转了吧~
解决方法有很多，介绍一种逻辑上的正确处理方案：无法触发点击事件就自己trigger
因为新浪那边不是a哦，他是一堆div，绑定了点击然后跳转哦
正如你所说，我看了一下新浪的写法。
加一个setTimeout。
要比给整个doc加事件好。