1.冒泡事件：
舉例：點擊div元素，body元素也會執行點擊事件，從而修改了body背景，但是我們指向修改div的背景
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2">
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","red")
})
})
</script>
</body>
輸出：
2.阻止事件冒泡
方法1：
event.stopPropagation() 方法
語法：
event.stopPropagation()
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2">
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(e){
// 修改背景顏色
$(this).css("background-color","red")
// 阻止冒泡
e.stopPropagation()
})
})
</script>
</body>
輸出：
方法2：
return false
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2">
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(e){
// 修改背景顏色
$(this).css("background-color","red")
// 阻止冒泡
return false
})
})
</script>
</body>
3.默認行為
示例：點擊<a>標簽，不管點擊是還是否，都會默認跳轉頁面
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2"><a id="a" href="#">跳轉</a>
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(e){
// 修改背景顏色
$(this).css("background-color","red")
// 阻止冒泡
return false
})
$("a").bind("click",function(e){
var d = window.confirm("您訪問的網址存在安全風險，是否繼續")
})
})
</script>
</body>
輸出：都會跳入“#”
4.阻止默認行為：
方法1：
event.preventDefault() 方法阻止元素發生默認的行為。
語法：
event.preventDefault()
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2"><a id="a" href="#">跳轉</a>
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(e){
// 修改背景顏色
$(this).css("background-color","red")
// 阻止冒泡
return false
})
$("a").bind("click",function(e){
//阻止冒泡
e.stopPropagation()
var d = window.confirm("您訪問的網址存在安全風險，是否繼續")
if(d==false){
// 阻止默認行為
e.stopPropagation()
}
})
})
</script>
</body>
輸出： 點擊否，就不會跳轉
方法2：
return false
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<input type="text" id="box2"><a id="a" href="#">跳轉</a>
<script type="text/javascript">
// jQuery function 入口
$(document).ready(function(){
// body元素添加點擊事件
$("body").bind("click",function(){
// 修改背景顏色
$(this).css("background-color","yellow")
})
// div元素添加點擊事件
$("div").bind("click",function(e){
// 修改背景顏色
$(this).css("background-color","red")
// 阻止冒泡
return false
})
$("a").bind("click",function(e){
//阻止冒泡
e.stopPropagation()
var d = window.confirm("您訪問的網址存在安全風險，是否繼續")
if(d==false){
return false
}
})
})
</script>
</body>
總結：
return false 即阻止冒泡，又阻止默認行為