Event事件之阻止事件冒泡
阻止事件冒泡
mouseover 和 mouseout事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
p{
width: 100px;
height: 100px;
background: blue;
margin: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var div=document.querySelector('div');
div.addEventListener('mouseover',function(){
console.log('移入了')
})
div.addEventListener('mouseout',function(){
console.log('移出了')
})
</script>
</body>
</html>
我們發現從div移入其子元素p標籤，還會打印“移出了”，再打印“移入了”，再將其移入div，還會打印“移出了”，再打印“移入了”。
結論：如果鼠標移入或者移出 子元素 範圍 ，mouseover 和 mouseout 會觸發~
mouseenter和 mouseleave事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
p{
width: 100px;
height: 100px;
background: blue;
margin: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var div=document.querySelector('div');
div.addEventListener('mouseenter',function(){
console.log('移入了')
})
div.addEventListener('mouseleave',function(){
console.log('移出了')
})
</script>
</body>
</html>
我們發現從div移入其子元素p標籤，就沒有任何反應了。
結論：mouseenter 和 mouseleave 不受 子級元素範圍干擾~
取消冒泡
有的需求可能需要執行元素本身的事件，不需要執行父級身上的事件。這個時候就需要我們取消冒泡事件了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
p{
width: 100px;
height: 100px;
background: blue;
margin: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var div=document.querySelector('div');
var p=document.querySelector('p');
div.addEventListener('click',function(){
alert('div')
})
p.addEventListener('click',function(e){
alert('p')
})
</script>
</body>
</html>
假設我們需要點擊p標籤的時候，只需要顯示打印“p”的對話框怎麼整？
### cancelBubble ---
var div=document.querySelector('div');
var p=document.querySelector('p');
div.addEventListener('click',function(){
alert('div')
})
p.addEventListener('click',function(e){
// 取消事件冒泡
e.cancelBubble = true;
alert('p')
})
要實現點擊哪個，就去執行哪個標籤的對應事件：
stopPropagation
var div=document.querySelector('div');
var p=document.querySelector('p');
div.addEventListener('click',function(){
alert('div')
})
p.addEventListener('click',function(e){
// 取消事件冒泡
e.stopPropagation()
alert('p')
})
cancelBubble和stopPropagation的區別：
cancelBubble：這是ie最早之前支持的方法，後期的時候谷歌和火狐才支持它了，原本它其實不在標準規範裏，它兼容性非常好支持ie老版本，如果僅考慮兼容性可以使用它。
stopPropagation：這是標準W3C標準，建議在現代的瀏覽器使用。
（後續待補充）