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


Posted in Javascript onJune 30, 2014

首先看下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>
Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
详解JavaScript常量定义
Jan 03 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
详解vue 模版组件的三种用法
Jul 21 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
js实现特定位取反原理及示例
Jun 30 #Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 #Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 #Javascript
html文本框提示效果的示例代码
Jun 28 #Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 #Javascript
You might like
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript 常用功能总结
2012/03/18 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
浅析vue深复制
2018/01/29 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python实现名片管理系统
2020/02/14 Python
Python 操作 MySQL数据库
2020/09/18 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
客服主管岗位职责
2013/12/13 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
周年庆促销方案
2014/03/15 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
同意迁入证明模板
2014/10/26 职场文书
财务会计岗位职责
2015/02/03 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
教师考核鉴定意见
2015/06/05 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书