The above is a very simple test code
If onmouseover bubbles, the onclick event and onmouseout event should be triggered. However, it does not happen.
Clicking the onclik event does not trigger the onmouseout event either.
So what are the specific ones that are not supported? Bubbling events?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
width: 100px;
height: 100px;
background: red;
text-align: center;
line-height: 100px;
float: left;
}
p{
width: 100px;
height: 100px;
background: blueviolet;
text-align: center;
line-height: 100px;
float: left;
display: none;
}
.dis{
display: block;
}
</style>
</head>
<body>
<p id="d">
<span>
点击
</span>
<p>浮动</p>
</p>
</body>
<script>
var d=document.getElementById('d')
var s=document.getElementsByTagName('span')[0];
var p=document.getElementsByTagName('p')[0];
d.onclick=function(){
console.log('123456789')
}
s.onmouseover=function(){
p.style.display='block';
}
p.onmouseover=function(){
p.style.display='block';
}
document.onmouseout=function(){
p.style.display='none';
}
</script>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There may be something wrong with your understanding of the bubbling mechanism. Bubbling is the propagation of events between different levels. . .
For example, load, unload, blur, focus, mouseleave...
For details, please see the W3C document: Events whose Bubbles attribute is NO in the document do not support bubbling
Bubbling must also be the same type of event. For example, click can only trigger click.
The event triggering mechanism is different and it will definitely not spread