zoukankan      html  css  js  c++  java
  • 点击其它地方关闭DIV

    以前是通过监听document的onclick事件,获取当前对象的ID,如果不为要显示DIV的id,则关闭DIV。

    没下面这个好用:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>点击其它地方关闭DIV</title>
    </head>

    <body>
    <input type="text" value="" id="tf"/>
    <div style="400px; height:200px;border:1px solid #000;display:none" id="con">
    <p>1111</p>
    <p><span>2222</span></p>
    <p><a href="#">3333</a></p>
    </div>
    <script>
    function e(obj){return document.getElementById(obj)}
    e(
    'tf').onclick=function(event){
    e(
    'con').style.display='block';
    stopBubble(event);
    document.onclick
    =function(){
    e(
    'con').style.display='none';
           document.onclick=null; 
    }
    }

    e(
    'con').onclick=function(event){
    //只阻止了向上冒泡,而没有阻止向下捕获,所以点击con的内部对象时,仍然可以执行这个函数
    stopBubble(event);
    }
    //阻止冒泡函数
    function stopBubble(e){
    if(e && e.stopPropagation){
    e.stopPropagation();
    //w3c
    }else{
    window.event.cancelBubble
    =true; //IE
    }
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    134. Gas Station
    135. Candy
    137. Single Number II
    136. Single Number
    138. Copy List with Random Pointer
    140. Word Break II(hard)
    139. Word Break
    笔试面试知识点
    OA的一些概念
    实验记录贴 —— 账号同步实验 RTX 和 LDAP(AD域)
  • 原文地址:https://www.cnblogs.com/bennman/p/2078442.html
Copyright © 2011-2022 走看看