jQuery实现鼠标点击Div区域外隐藏Div

bigegpt 2024-10-24 09:02 10 浏览

[

][1]

jQuery本身没有这样一个事件，要实现这个效果，我们首先要先了解javascript中的事件冒泡。

冒泡定义：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。（摘自网络）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 Click

上述代码运行后，点击链接，以此会出现link, inner, outer, document,转向百度。

也就是说我们点击链接后 click事件一直冒泡传递在最外层body。

1. 阻止事件冒泡, 并不阻止事件行为：event.stopPropagation();

$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});});

上述代码运行后，点击链接，按顺序会出现link, 转向百度。

2. 阻止事件行为，并阻止事件冒泡：event.preventDefault();

$(function() {
$("#link").click(function(event) {
event.preventDefault();
});});

上述代码运行后，点击链接，按顺序会出现link, inner, outer, document, 但是不转向百度。

3. 阻止事件冒泡, 也阻止事件行为：return false;

$(function() {
$("#link").click(function(event) {
return false;
});});

上述代码运行后，点击链接，只会出现link。

因此我们可以看出事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！

所以鼠标点击Div区域外隐藏Div正需要用到事件冒泡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is a div.
This is a demo.

</pre>在jquery click事件上设置click事件： 
首先在document上添加一个点击隐藏Div的事件 
然后分别在点击button和div的时候防止冒泡到document$("#btn").click(function (event) {$("#demo").fadeIn();$(document).one("click", function () {//对document绑定一个影藏Div方法$("#demo").hide();});event.stopPropagation();//点击Button阻止事件冒泡到document});$("#demo").click(function (event) {event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document});

 [1]: http://www.crackedzone.com/uploads/2012/08/divout.jpg

jquery鼠标移入移出

上一篇：无限循环滚动广告和选中无限循环滚动广告和选中广告区别
下一篇：jQuery入门看这一篇就够了!超详细!(三)

jQuery实现鼠标点击Div区域外隐藏Div

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解