[][1]

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

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

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



Lancer - Jquery 事件冒泡
   


    

上述代码运行后,点击链接,以此会出现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">



鼠标点击Div区域外隐藏Div


 

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

在敏捷回顾会议中引导使用ORID

头一次接触ORID方法在2015年的一次敏捷回顾上,但是还不知道它,当天围坐在小会议室中通过该方法总结迭代开发经验,使我很有收获。ORID工作法很好理解,几乎一听就会,只是日常工作中我们总会选择更偷懒的方法,而忽略了总结过程中思考和逻辑的重要性。根据百度百科,ORID是一种...… Continue reading

生产环境Linux部署

Published on July 12, 2017

SVN 迁移到 GitLab

Published on June 17, 2017