如何当弹出的div失去焦点的时候自动隐藏(JS如何模拟鼠标点击X,Y坐标)

最新推荐文章于 2024-04-09 14:32:59 发布

hellosnowyy

最新推荐文章于 2024-04-09 14:32:59 发布

阅读量4.4k

点赞数

分类专栏： JavaScript 前端 HTML5

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

在开发中，我们经常会使用div作为弹出框，比如自定义select，搜索input的历史记录框等等，但是如何当弹出的div失去焦点的时候自动隐藏呢？
下面我总结了几个方法：

第一种
在document.body上注册一个click事件的函数，然后判断下当前的click的事件的Element是否等于那个div，不是的话就消失。
例子：
定义一个点击input和一个id为box的弹出框

<style>
 #box{width:100px;height:100px;background:blue;display:none;}
</style>
<div id="box">
</div>
<input type="button" id="button" value="show" />

这里，我们使用jQuery来处理

$("#button").click(function(event){
     $("#box").show();
    event.stopPropagation();  //阻止冒泡
});
$("body").click(function(){
     $("#box").hide();
})
$('#box').click(function(){
     return false;
});

第二种

定义一个点击input和一个id为box的弹出框，还有一个id为mask全屏透明的遮罩层

<style>
#mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:11;background:rgba(0,0,0,0);}    #box{position:absolute;top:0;left:0;width:100px;height:50px;z-index:10;}
</style>
<div id="box">
</div>
<input type="button" id="button" value="show" />
<div id="mask"></div>

接下来是jQuery代码

$("#button").click(function(event){
    $("#box").show();
    $("#mask").show();
    event.stopPropagation();  //阻止冒泡
});
$('#mask').click(function(){
    $("#box").hide();
    $("#mask").hide();
});

第三种

利用tabindex，让div能获取到焦点

<style>
#box{width:100px;height:100px;background:blue;display:none;}
</style>
<div id="box" tabindex="1">
</div>
<input type="button" id="button" value="show" />

再来看看jQuery如何实现的：

$("#button").click(function(event){
    $("#box").show();
    $("#box").focus();
    event.stopPropagation();  //阻止冒泡
});
$('#box').blur(function(){
    $("#box").hide();
});

JS如何模拟鼠标点击X,Y坐标

<!DOCTYPE html>
<html>
    <body>
        <script>
            function imitateClick(oElement, iClientX, iClientY) {
                var oEvent;
                if (document.createEventObject) { //For IE
                    oEvent = document.createEventObject();
                    oEvent.clientX = iClientX;
                    oEvent.clientY = iClientY;
                    oElement.fireEvent("onclick", oEvent);  
                } else {
                    oEvent = document.createEvent("MouseEvents");
                    oEvent.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 
                                          iClientX, iClientY/*, false, false, false, false, 0, null*/); 
                    oElement.dispatchEvent(oEvent);
                }
            }
            var body = document.body;
            body.onclick = function(event) {
                alert("clicked at (" + event.clientX + "," + event.clientY + ")");
            };
            imitateClick(body, 100, 100);
        </script>
    </body>
</html>

转载地址：http://ghmagical.com/article/page/id/wklcyjv80m6Z

hellosnowyy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何当弹出的div失去焦点的时候自动隐藏(JS如何模拟鼠标点击X,Y坐标)

在开发中，我们经常会使用div作为弹出框，比如自定义select，搜索input的历史记录框等等，但是如何当弹出的div失去焦点的时候自动隐藏呢？下面我总结了几个方法：第一种在document.body上注册一个click事件的函数，然后判断下当前的click的事件的Element是否等于那个div，不是的话就消失。例子：定义一个点击input和一个id为box的弹出框<style>
复制链接

扫一扫