1、HTML页面

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style type="text/css">

        #pop {

            border: #000;

            background-color: #CCC;

            position: absolute;

            left: 50px;

            top: 50px;

            width: 200px;

            height: 500px;

            display: none;

        }

        #btn {

            color: #f00;

        }

    </style>

</head>

<body>

    <span id="btn">打开层</span>

    <div>aaaaaaaaaaaa</div>

    <div>aaaaaaaaaaaa</div>

    <div id="pop">

        浮层，点击这个浮层以外的区域，都可以隐藏这个浮层

        <p><a href="javascript:;">最主要的是点这个div里面的链接，div照样不隐藏</a></p>

    </div>

</body>

</html>

2、js 实现

<script type="text/javascript">

    function $(id) { return document.getElementById(id); }

    window.onload = function () {

        document.onclick = function (e) {

            $("pop").style.display = "none";

        }

        $("btn").onclick = function (e) {

            $("pop").style.display = "block";

            e = e || event; stopFunc(e);

        }

        $("pop").onclick = function (e) {

            e = e || event; stopFunc(e);

        }

    }

    function stopFunc(e) {

        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

    }

</script>

3、JQuery 实现

$("#btn").on("click", function(e){

    $("#menu").show();

    $(document).one("click", function(){

        $("#menu").hide();

    });

    e.stopPropagation();

});

$("#menu").on("click", function(e){

    e.stopPropagation();

});

原文链接：https://blog.csdn.net/yangbingx/article/details/78644486

js/jq 点击按钮显示div，点击页面其他任何地方隐藏div的更多相关文章

  1. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  2. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  3. js实现点击按钮显示某个区域 然后点击页面中任意其他位置，隐藏该区域

    $(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...

  4. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  5. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  6. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  7. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  8. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  9. 点击按钮使用window.open打开页面后，再次点击按钮会再打开一个页面，如何解决？

    点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...

  10. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

随机推荐

  1. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

  2. KingbaseES R3 集群pcp_attach_node 更新show pool_nodes中节点状态

    系统环境: 操作系统: [kingbase@node2 bin]$ cat /etc/centos-release CentOS Linux release 7.2.1511 (Core) 数据库: ...

  3. DOS文档

  4. 硬核剖析Redis单线程为什么那么快？

    (本文首发于"数据库架构师"公号,订阅"数据库架构师"公号,一起学习数据库技术,助力职业发展) Redis目前是使用率最高的内存库数据库,是企业应用开发的必备, ...

  5. 输入法词库解析（四）百度分类词库.bdict(.bcd)

    前言 .bdict 是百度的分类词库格式,可以在 https://shurufa.baidu.com/dict 下载. 手机百度的分类词库格式 .bcd 是一样的,可以在 https://mime.b ...

  6. vue开发组件开发中的小技巧

    声明:以下随笔由博主自主编写,也有部分引用网友的,引用部分版权归原作者所有,其他博主原创部分禁止转载.复制全部或部分用以重新发布! vue递归组件事件阻止冒泡 其实这里主要还有递归组件的自定义事件不生 ...

  7. 查看当前看k8s集群支持的版本命令

    # kubectl api-versions admissionregistration.k8s.io/v1 admissionregistration.k8s.io/v1beta1 apiexten ...

  8. redis cluster 6.2集群

    redis最新版本:redis-6.2.1.tar.gz 安装的版本是redis-6.0.3 采用的主机: djz-server-001 192.168.2.163 7001,7002,Admin@1 ...

  9. 【原创】推流录屏软件OBS使用教程--录屏

    之前有录屏需要,写了一篇关于ffmpeg录屏的文章,反响还不错,但是直接用ffmpeg门槛有些高,今天写一篇图形界面的录屏推流工具OBS的使用教程.这次先写OBS的录屏教程 下载安装 点击 OBS官网 ...

  10. TF-GNN踩坑记录(二)

    引言 最近在尝试构建GraphTensor时,尝试把默认的特征名hidden_state改成其他时,出现了奇怪的报错. 报错 WARNING:tensorflow:Gradients do not e ...