倾城之恋墨攻 2019-06-27 11:01 采纳率: 100%
浏览 1051
已采纳

如何解决在IE中input获得焦点后,拖动其他div的滚动条不触发input的失去焦点事件?

在谷歌,或者火狐浏览器中当输入框获得焦点,拖动其他div的输入框不会触发input的失去焦点事件,但是在IE中会触发,请问如何解决?
想要的效果是当我输入框获得焦点展示div时,拖动div的滚动条不要触发失去焦点事件,div仍能展示而不是被隐藏。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            #divshow {
                display: none;
                width: 200px;
                height: 100px;
                overflow: hidden;
                overflow-y: auto;
            }

            #divinner {
                width: 200px;
                height: 400px;
                background-color: blueviolet;
            }

            .scrolls {
                height: 3000px;
                width: 500px;
                float: left;
            }

            #box {
                width: 600px;
                overflow: hidden;
                overflow-y: auto;
                height: 500px;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <div class="scrolls">
                <input type="text" name="boxa" id="boxa" value="" />
                <div class="div1" id="divshow">
                    <div id="divinner">
                        这是里面的内容
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>
<script type="text/javascript">
    var xx = document.all
    console.log(xx);
    var inp = document.getElementById("boxa");
    inp.onfocus = function() {
        document.getElementById("divshow").style.display = "block";
    }
    inp.onblur = function() {
        console.log("失去焦点");
        document.getElementById("divshow").style.display = "none";
    }
</script>
  • 写回答

3条回答 默认 最新

  • Acquainted_____ 2019-06-27 14:46
    关注

    <!DOCTYPE html>




    <br> * {<br> margin: 0;<br> padding: 0;<br> list-style: none;<br> }<br> #divshow {<br> display: none;<br> width: 200px;<br> height: 100px;<br> overflow: hidden;<br> overflow-y: auto;<br> }<br> #divinner {<br> width: 200px;<br> height: 400px;<br> background-color: blueviolet;<br> }<br>






    这是里面的内容




    var flag = 0; var inp = document.getElementById("boxa"); inp.onclick = function(ev) { var ev = ev || window.event; if(ev.stopPropagation) { //W3C阻止冒泡方法 ev.stopPropagation(); } else { ev.cancelBubble = true; //IE阻止冒泡方法 } }; inp.onfocus = function(ev) { flag = 1; console.log("inputfocus", flag); document.getElementById("divshow").style.display = "block"; }; inp.onblur = function() { flag = 0; console.log("失去焦点", flag); }; document.getElementById("divshow").onclick = function(ev) { var ev = ev || window.event; console.log(ev); console.log(ev.currentTarget); console.log(ev.srcElement); var clickElement=null; if (ev.currentTarget) { clickElement=ev.currentTarget; }else{ clickElement=ev.srcElement; } console.log(this); if (clickElement === this) { // flag = 1; // console.log("div", flag); flag = 0; console.log("div", flag); } if(ev.stopPropagation) { //W3C阻止冒泡方法 ev.stopPropagation(); } else { ev.cancelBubble = true; //IE阻止冒泡方法 } }; window.onclick = function() { console.log("click", flag); if (flag != 1) { document.getElementById("divshow").style.display = "none"; } flag = 0; };
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 unity从3D升级到urp管线,打包ab包后,材质全部变紫色
  • ¥50 comsol温度场仿真无法模拟微米级激光光斑
  • ¥15 上传图片时提交的存储类型
  • ¥15 Ubuntu开机显示器只显示kernel,是没操作系统(相关搜索:显卡驱动)
  • ¥15 VB.NET如何绘制倾斜的椭圆
  • ¥15 arbotix没有/cmd_vel话题
  • ¥15 odoo17的分包重新供应路线如何设置?可从销售订单中实时直接触发采购订单或相关单据
  • ¥15 用C语言怎么判断字符串的输入是否符合设定?
  • ¥15 通信专业本科生论文选这两个哪个方向好研究呀
  • ¥50 我在一个购物网站的排队系统排队,这个排队到号后重新定向到目标网站进行购物,但是有技术牛通过技术方法直接跳过排队系统进入目标网址购物,有没有什么软件或者脚本可以用