事件执行顺序问题
<!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
新浪首页上方的那个搜索框的效果的，查了查好像是事件冒泡有关的，不是很懂，不知道大家有什么好的建议没，谢谢
Durex
9 years, 9 months ago
Answers
要解决这个问题很简单..你只要仿得更彻底一点，做一个slideToggle动画就可以了。
具体分析:
当有input处于focus状态时，点击页面其它元素，会先触发input元素的blur事件并回调其事件处理器，然后在触发其它元素的事件。
证据！
HTML
<input type="text" id="input">
<button id="click">click</button>
JS
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);
}
key123
answered 9 years, 9 months ago
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";
}
猫猫天飞
answered 9 years, 9 months ago
