问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

事件执行顺序问题

头像
浴火小青春
    65732129
        <!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新浪首页上方的那个搜索框的效果的，查了查好像是事件冒泡有关的，不是很懂，不知道大家有什么好的建议没，谢谢

    javascript事件
    阅读 5.8k
    4 个回答
    得票最新
    头像
    hello雨荷
      2432510
      头像
      NnNn
        14.2k4920
        ✓ 已被采纳
        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";
}
        头像
        Venshy
          681

          要解决这个问题很简单..你只要仿得更彻底一点，做一个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);
}
          头像
          Fakefish
            4.3k258085

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

            头像
            曲双如
              1
              新手上路，请多包涵

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

              加一个setTimeout。

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

              要比给整个doc加事件好。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题