前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EonerCMS——做一个仿桌面系统的CMS(六)

EonerCMS——做一个仿桌面系统的CMS(六)

作者头像
胡尐睿丶
发布2022-03-23 16:33:11
3840
发布2022-03-23 16:33:11
举报
文章被收录于专栏:代码小睿代码小睿

事件冒泡

  事件冒泡是个很常见的问题,不过我之前没听说过,所以这里只是做个笔记,如果了解事件冒泡,并清楚如何处理的,可以直接跳过这篇文章。下面我们看下这面这demo,点击红色区域,会弹出1,点击灰色,会弹出2。

代码语言:javascript
复制
	$("#div1").click(function(){
		alert(1);
	});
	$("#div2").click(function(){
		alert(2);
	});

  处理办法其实很简单,有两种,一种就是“e.stopPropagation();”,另外一种就是“return false;”。

代码语言:javascript
复制
	$("#div1").click(function(){
		alert(1);
	});
	$("#div2").click(function(e){
		e.stopPropagation();
		alert(2);
	});

  或者:

代码语言:javascript
复制
	$("#div1").click(function(){
		alert(1);
	});
	$("#div2").click(function(e){
		alert(2);
		return false;
	});

  两种解决办法的区别就是,return false必须放在方法最后,不然之后的代码也就不执行了,也就是说,当你把return false放在最头部的时候,不仅阻止了事件往上冒泡,而且阻止了事件本身。

  关于在EonerCMS里哪里会用到阻止冒泡呢,看下这张图吧

  由于title区域的拖动事件执行顺序是mousedown->mousemove,所以在title区域里的最大化、最小化等按钮,他们的事件虽然是click,但click默认也执行了mousedown,所以这里需要先统一阻止冒泡。

代码语言:javascript
复制
	//组织冒泡,之前对窗口绑定过事件
	obj.find("a").bind("mousedown",function(e){
		e.stopPropagation();
	});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-10-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档