zoukankan      html  css  js  c++  java
  • js点击元素以外的地方隐藏 元素的方法

    js实现 点击元素以外的地方隐藏 元素的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        
    <head> 
            
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
            
    <title>点击一个连接显示层~点击其他区域隐藏 练习 by 脚本之家</title> 
            
    <style type="text/css"> 
                #myDiv
    { 
                    border
    :1px solid #000000; 
                    width
    :200px; 
                    height
    :100px; 
                    background
    :#cccccc; 
                
    } 
            
    </style> 
            
    <script language="JavaScript" type="text/javascript"> 
    function addListener(element, e, fn) {
        
    if (element.addEventListener) {
            element.addEventListener(e, fn, 
    false);
        } 
    else {
            element.attachEvent(
    "on" + e, fn);
        }
    }
    addListener(document, 
    "click",
    function(evt) {
        
    var evt = window.event ? window.event: evt,
        target 
    = evt.srcElement || evt.target;
        
    if (target.id == "showDiv") {
            document.getElementById(
    "myDiv").style.display = "";
            
    return;
        } 
    else {
            
    while (target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html") {
                target 
    = target.parentNode;
            }
            
    if (target.nodeName.toLowerCase() == "html") {
                document.getElementById(
    "myDiv").style.display = "none";
            }

        }
    })
            
    </script> 
        
    </head> 
        
    <body> 
            
    <div id="myDiv" style="display:none;"><href="http://www.jb51.net" target="_blank">脚本之家</a></div> 
            
    <input type="button" value="出来吧层" id="showDiv" /> 
        
    </body> 
    </html> 
  • 相关阅读:
    异常处理(五)
    抽象与接口(七)
    MYSQL创建数据库时候直接指定编码和排序规则
    C#基本语法(一)
    C#中字符串处理(三)
    Ajax实例化(五)
    C#函数(二)
    MemberCache学习摘要
    ORACLE 根据日期范围自动日期table
    动态执行SQL语句,并输出参数
  • 原文地址:https://www.cnblogs.com/mutuan/p/2146457.html
Copyright © 2011-2022 走看看