JQ在window系统事件冒泡处理--贴上demo代码

最新推荐文章于 2025-10-17 14:42:42 发布

原创最新推荐文章于 2025-10-17 14:42:42 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JS 专栏收录该内容

2 篇文章

订阅专栏

本文演示了如何使用jQuery在Window系统中实现事件冒泡，使得子元素的点击事件可以触发父级元素的动画效果。通过简单的HTML、CSS和jQuery代码，展示了动画效果的实现过程。

JQ在window系统事件冒泡，子元素的事件会冒泡到上一级元素

写的一个简单的demo

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>caa</title>
<style>
.kn {
	background-color: #0033CC;
	height: 45px;
	width: 66px;
	margin: 25px;
	font-size: 12px;
	color: #FFFFFF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div class="kn">点击伸长</div>
<script>
$(function(){

	$(window).click(function(){
		$(".kn").stop().animate({
				'width':'+=70px'
		},1000);
	})
	$(".kn").click(function(){
		return false;
	})
	
})
</script>
</body>
</html>