关于标题中两个事件的基本用法可以参阅以下两篇文章。
(1).mouseleave事件详解一章节。
(2).javascript mouseout事件一章节。
下面再介绍一下这两两个事件的区别主要在哪些方面。
一.onmouseleave事件不具有冒泡特性:
onmouseleave事件不具有冒泡特点,而onmouseout事件具有。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> #mouseout,#mouseleave { width:300px; height:200px; background:#ccc; margin:0px auto; margin-bottom:20px; } #top,#bottom { width:100px; height:100px; background:green; margin:0px auto; } #mouseout_show,#mouseleave_show { text-align:center; } </style> <script type="text/javascript"> window.onload = function () { var mouseout = document.getElementById("mouseout"); var mouseleave = document.getElementById("mouseleave"); var top = document.getElementById("top"); var bottom = document.getElementById("bottom"); var mouseout_show = document.getElementById("mouseout_show"); var mouseleave_show = document.getElementById("mouseleave_show"); var mouseoutCount = 0; var mouseleaveCount = 0; mouseout.onmouseout = function () { mouseoutCount = mouseoutCount + 1; mouseout_show.innerHTML = mouseoutCount; } top.onmouseout = function () { mouseoutCount = mouseoutCount + 1; mouseout_show.innerHTML = mouseoutCount; } mouseleave.onmouseleave = function () { mouseleaveCount = mouseleaveCount + 1; mouseleave_show.innerHTML = mouseleaveCount; } bottom.onmouseleave = function () { mouseleaveCount = mouseleaveCount + 1; mouseleave_show.innerHTML = mouseleaveCount; } } </script> </head> <body> <div id="mouseout"> <div id="top"></div> </div> <div id="mouseout_show"></div> <div id="mouseleave"> <div id="bottom"></div> </div> <div id="mouseleave_show"></div> </body> </html>
从上面的代码演示可以看到onmouseleave是没有冒泡效果的,onmouseout是有的。
特别说明:
(1).从父元素移入子元素也会触发父元素的onmouseout事件。
(2).从子元素移出,也会触发父元素的onmouseout事件,并且无法通过阻止冒泡事件阻止这一现象。
onmouseleave和onmouseout事件的区别,这样的场景在实际项目中还是用的比较多的,关于onmouseleave和onmouseout事件的区别就介绍到这了。
onmouseleave和onmouseout事件的区别属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98550.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: JS实现搜索关键词的智能提示功能
下一篇: Angular.js自动化测试之protractor详解