mouseent和mouseover的区别
Posted niuyaomin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mouseent和mouseover的区别相关的知识，希望对你有一定的参考价值。
使用mouseover会产生冒泡事件结合onmouseout一起使用
控制台里面的小盒子也会触发大盒子的事件这叫冒泡事件，所以使用mouseover会产生冒泡事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ width: 300px; height: 300px; background-color: brown; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } #box2{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> <script> box1.addEventListener("mouseover",function(){ console.log("被触发"); }); </script> </body> </html>
mouseent鼠标经过事件不会产生冒泡事件搭配mouseleave鼠标离开事件使用
鼠标经过小盒子时不会被触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ width: 300px; height: 300px; background-color: brown; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } #box2{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> <script> box1.addEventListener("mouseenter",function(){ console.log("被触发"); }); </script> </body> </html>
以上是关于mouseent和mouseover的区别的主要内容，如果未能解决你的问题，请参考以下文章