vue鼠标移入移出事件执行多次(尤其ie)

人工智能
2025-08-12 09:57:03

mouseover 当一个定点设备（通常指鼠标）在一个元素本身或者其子元素上移动时，mouseover 事件在该元素上触发。 mouseenter 事件在定点设备（通常指鼠标）首次移动到元素的激活区域内时，在该元素上触发。 mouseenter尽管与 mouseover 类似，但是 mouseenter 的不同之处在于当鼠标指针从它后代的物理空间移动到它自己的物理空间时，它不会冒泡，也不会发送给它的任何后代。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <script> const test = document.getElementById("test"); // 当光标移到无序列表上时，此处理函数将仅执行一次 // test.addEventListener( // "mouseenter", // (event) => { // // 突出显示鼠标悬停目标 // event.target.style.color = "purple"; // // 短暂延迟后重置颜色 // setTimeout(() => { // event.target.style.color = ""; // }, 500); // }, // false, // ); // 每次将光标移动到不同的列表项上时，此处理函数都会执行 test.addEventListener( "mouseover", (event) => { // 突出显示鼠标悬停目标 event.target.style.color = "orange"; // 短暂延迟后重置颜色 setTimeout(() => { event.target.style.color = ""; }, 500); }, false, ); </script> </body> </html>

总结 mouseenter和mouseleave配合使用 mouseover和mouseout配合使用

标签：

vue鼠标移入移出事件执行多次(尤其ie)由讯客互联人工智能栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“vue鼠标移入移出事件执行多次(尤其ie)”

上一篇
Git精讲

下一篇
【Go入门】并发