什麼是事件冒泡 <div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()"> <p onclick="test()" style="background: blue"> wub ...
什麼是事件冒泡
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner()">子欽博客</span>
</p>
</div>
<script>
function inner() {
alert('inner');
}
function test() {
alert('test')
}
function box() {
alert('box')
}
</script>
佈局結構如下圖
一共單層元素
從外到里依次：div、p、span
每個元素都有單機事件
當單擊div觸發彈出box
當單擊p標簽時依次彈出：test、box
當單擊span標簽依次彈出：inner、test、box
這個即為事件冒泡
從最裡層冒泡到最外層
如何阻止
很多時候我們不希望事件冒泡
也就是我點擊p的時候只彈出test
點擊span時候只彈出inner
1.event.stopPropagation()
<body>
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner(event)">武斌博客</span>
</p>
</div>
<script>
function inner() {
alert('inner');
event.stopPropagation();
}
function test() {
alert('test')
}
function box(event) {
alert('box')
}
</script>
</body>
這個時候再點擊子欽博客時
只是彈出inner
2.return false
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<span style="background: green" >武斌博客</span>
</p>
</div>
<script>
$(function () {
$('span').click(function(){
alert('inner');
return false;
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
效果跟第一種相同
都可以阻止事件冒泡
return false與event.stopPropagation()區別
我們將以上代碼修改為:
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro" style="background: green" >子欽博客</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
event.stopPropagation();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
可以看出
當使用return false時
a標簽的預設行（跳轉頁面）為也會被阻止
當使用event.stopPropagation()時
先彈出inner
然後頁面跳轉
總結
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro" style="background: green" >子欽博客</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
// event.stopPropagation();
event.preventDefault();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
return false：阻止事件冒泡和預設行為
event.stopPropagation()：單獨阻止事件冒泡
event.preventDefault()：單獨阻止預設行為
