点击空白处隐藏：判断当前对象event.target.id||event.srcElement.id

最新推荐文章于 2024-04-23 11:49:15 发布

吃瓜群众欢乐多

最新推荐文章于 2024-04-23 11:49:15 发布

阅读量3.5k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_36146776/article/details/52966324

版权

一个盒子，点击除了自己之外的任何一个地方，就会隐藏。

原理：

点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 )

点击空白处就是点击 document

涉及知识点：阻止冒泡和判断当前对象

event.stopPropagation()

event.cancelBubble = true //IE

火狐谷歌等 event.target.id

ie 678 event.srcElement.id

兼容性写法：

  var targetId = event.target ? event.target.id : event.srcElement.id;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height:2000px;
        }
        #mask {
            width: 100%;
            height: 100%;
            opacity: 0.4;   /*半透明*/
            filter: alpha(opacity = 40);  /*ie 6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            display: none;
        }
    </style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<div id="mask"></div>
<div id="show"></div>
<script type="text/javascript">
    function $(id){return document.getElementById(id);}
    $("login").οnclick=function(event){
        $("mask").style.display="block";
        $("show").style.display="block";
        document.body.style.overflow="hidden";
        var event=event||window.event;
        if(event&&event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
    document.οnclick=function(event){
        document.body.style.overflow="visible";
        var event=event||window.event;
        var targetId = event.target ? event.target.id : event.srcElement.id;
        if(targetId !="show"){
            $("mask").style.display="none";
            $("show").style.display="none";
        }
    }
</script>
</body>
</html>

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击空白处隐藏：判断当前对象event.target.id||event.srcElement.id

一个盒子，点击除了自己之外的任何一个地方，就会隐藏。原理：点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 ) 点击空白处就是点击 document 涉及知识点：判断当前对象火狐谷歌等 event.target.id ie 678 event.srcElement.id
复制链接

扫一扫