这里贴原生代码,jquery里面也是这样
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: #2aabd2;
font: bold 28px 微软雅黑;
color: #fff;
margin: 50px auto;
}
#box2{
width: 100px;
height: 100px;
background-color: lightcoral;
}
#box3{
width: 200px;
height: 200px;
background-color: #2aabd2;
font: bold 28px 微软雅黑;
color: #fff;
margin: 50px auto;
}
#box4{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">BOX2</div>
BOX1
</div>
<div id="box3">
<div id="box4">BOX4</div>
BOX3
</div>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
var box4 = document.getElementById('box4')
var i = 0, j = 0
box1.onmouseover = function () {
i++
console.log('onmouseover触发了' + i)
}
box1.onmouseleave = function () {
i-=2
console.log('onmouseleave触发了' + i)
}
box3.onmouseenter = function () {
j++
console.log('onmouseenter触发了' + j)
}
box3.onmouseout = function () {
j-=2
console.log('onmouseout触发了' + j)
}
}
</script>
</body>
</html>
都以这个图为标准说明
mouseover和mouseenter
| 方式 | mouseover | mouseenter |
|---|---|---|
| 从外界直接进入box1 | 触发 | 触发 |
| 从外界直接进入box2 | 触发 | 触发 |
| 从box1进入box2 | 触发 | 不触发 |
| 从box2进入box1 | 触发 | 不 触发 |
得出结论 : mouseover冒泡,mouseenter不冒泡
mouseout和mouseleave
| 方式 | mouseout | mouseleave |
|---|---|---|
| 从box1出到外界 | 触发 | 触发 |
| 从box2出到外界 | 触发 | 触发 |
| 从box1出到box2 | 触发 | 不触发 |
| 从box2出到box1 | 触发 | 不 触发 |
得出结论 : mouseout冒泡,mouseleave不冒泡
总结 : 所有的鼠标事件中,只有mouseenter和mouseleave不冒泡,其他鼠标事件都是冒泡的,在使用这几种事件的时候,可以根据自己的需求进行选择
