jQuery第二十四篇 事件冒泡和默行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
//“冒泡事件:微软提出的 事件由子元素传递到父元素的过程,叫做冒泡”
//但是在实际项目开发中，我们可能并不需要元素的默认行为，所以就可以通过以下方式进行禁止。
$(".son").click(function(event)
{
// return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation();//则只阻止事件往上冒泡，不阻止事件本身。
});
//“冒泡事件:微软提出的 事件由子元素传递到父元素的过程,叫做冒泡”
//但是在实际项目开发中，我们可能并不需要元素的默认行为，所以就可以通过以下方式进行禁止。
$(".father").click(function()
{
alert("father");
});
$("a").click(function(event)
{
event.preventDefault();//阻止默认行为
alert("陈业贵");
});
});
</script>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form></body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/08/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
