DIV外区域Click后关闭DIV的实现代码

 更新时间:2011年12月21日 19:22:15   转载 作者:  
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根
阻止冒泡:
1、stopPropagation()对于非IE浏览器。
2、cancelBubble属性为true,对于IE浏览器,
而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation();
复制代码 代码如下:

<style>
body
      {
background:black;
      }
#myDiv
      {
background: #fff;
width:250px;
height:250px;
display:none;
      }
  </style>
<div id="myDiv">
This is a div;
</div>
<input id="btn" type="button" value="显示DIV" />
<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>

相关文章

  • jquery移动节点实例

    jquery移动节点实例

    这篇文章主要介绍了jquery移动节点的实现方法,主要涉及append()方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 省市区三级联动jquery实现代码

    省市区三级联动jquery实现代码

    这篇文章主要为大家详细绍了省市区三级联动jquery实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript实现的滚动公告特效【基于jQuery】

    JavaScript实现的滚动公告特效【基于jQuery】

    这篇文章主要介绍了JavaScript实现的滚动公告特效,结合完整实例形式详细分析了基于jQuery实现的页面元素间歇修改,最终达到滚动公告效果的相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • jQuery ajax中使用confirm,确认是否删除的简单实例

    jQuery ajax中使用confirm,确认是否删除的简单实例

    下面小编就为大家带来一篇jQuery ajax 中使用confirm ,确认是否删除的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery事件绑定方法学习总结(推荐)

    jQuery事件绑定方法学习总结(推荐)

    下面小编就为大家带来一篇jQuery事件绑定方法学习总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • web开发人员学习jQuery的6大理由及jQuery的优势介绍

    web开发人员学习jQuery的6大理由及jQuery的优势介绍

    jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS
    2013-01-01
  • jquery选择器之层级过滤选择器详解

    jquery选择器之层级过滤选择器详解

    本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • EasyUI 结合JS导出Excel文件的实现方法

    EasyUI 结合JS导出Excel文件的实现方法

    下面小编就为大家带来一篇EasyUI 结合JS导出Excel文件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jquery实现垂直手风琴菜单

    jquery实现垂直手风琴菜单

    这篇文章主要为大家详细介绍了jquery实现垂直手风琴菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • jQuery给指定的table动态添加删除行的操作方法

    jQuery给指定的table动态添加删除行的操作方法

    今天在项目中,刚好用到给指定的table添加一行、删除一行。添加一行,支持在任意行添加一行且可配置的,删除一行支持动态删除一行。本文给大家介绍的非常详细,一起看看吧
    2016-10-10

最新评论