js实现的点击div区域外隐藏div区域

首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。

阻止冒泡：1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true，对于IE浏览器，

而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}

#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="显示DIV" />

<div id="myDiv">
This is a div;
</div>

</body>

<script type="text/javascript">
　　　　var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event)
{
showDiv();//调用显示DIV方法
$(document).one("click", function ()
{//对document绑定一个影藏Div方法
$(myDiv).hide();
});

event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event)
{

event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showDiv()
{
$(myDiv).fadeIn();
}
</script>
赞 (0)

相关推荐

  • 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. 复制代码 代码如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagat

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • 将两个div左右并列显示并实现点击标题切换内容

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

  • ajax实现点击不同的链接让返回的内容显示在特定div里

    /* 以下代码通过ajax实现在一个web页面点击不同的链接,然后将返回的结果显示在该页面固定的div里. */ <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script language="javascript"> var http_request = false; function create

  • Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

    Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!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>

  • js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>

  • 点击页面任何位置隐藏div的实现方法

    点击页面任何位置隐藏div的实现方法

    实例如下: <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script> <scri

  • js实现简易点击切换显示或隐藏

    本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码,供大家参考,具体内容如下 html: <div id="header"> <p>点击切换显示隐藏</p> <div class="close" onclick="closeTask()">关闭</div> </div> <div class="open" onclick="ope

  • 由点击页面其它地方隐藏div所想到的jQuery的delegate

    由点击页面其它地方隐藏div所想到的jQuery的delegate

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML

  • js实现的点击超链显示隐藏层

    点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati

  • js加载读取内容及显示与隐藏div示例

    复制代码 代码如下: <head> <script> function check(){ var num = document.getElementById("choose").value; alert(num); if(num=="4"){ document.getElementById("show").style.display="block"; }else{ document.getElement

  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||

  • vue 点击其他区域关闭自定义div操作

    方法一: 在外层div添加事件 @click="closeSel" html method closeSel(event){ var currentCli = document.getElementById("sellineName"); if(currentCli ){ if(!currentCli.contains(event.target)){ //点击到了id为sellineName以外的区域,隐藏下拉框 this.listLineUl = false; }

随机推荐