本章节通过代码实例介绍一下onmouseleave事件的用法。
当鼠标移出指定元素的时候就会触发此事件。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> #box { width:300px; height:200px; background:#ccc; margin:0px auto; } #antzone { width:100px; height:100px; background:green; margin:0px auto; } #show { text-align:center; } </style> <script type="text/javascript"> window.onload = function () { var obox = document.getElementById("box"); var oantzone = document.getElementById("antzone"); var oshow = document.getElementById("show"); oantzone.onmouseleave = function () { oshow.innerHTML = "www.pipipi.net"; } } </script> </head> <body> <div id="box"> <div id="antzone"></div> </div> <div id="show"></div> </body> </html>
上面的代码演示了onmouseleave事件,当鼠标离开antzone元素的时候就会触发此事件。
再来看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> #box { width:300px; height:200px; background:#ccc; margin:0px auto; } #antzone { width:100px; height:100px; background:green; margin:0px auto; } #show { text-align:center; } </style> <script type="text/javascript"> window.onload = function () { var obox = document.getElementById("box"); var oantzone = document.getElementById("antzone"); var oshow = document.getElementById("show"); var count = 0; obox.onmouseleave = function () { count = count + 1; oshow.innerHTML = count; } oantzone.onmouseleave = function () { count = count + 1; oshow.innerHTML = count; } } </script> </head> <body> <div id="box"> <div id="antzone"></div> </div> <div id="show"></div> </body> </html>
上面的代码中,父元素和子元素都注册了onmouseleave事件处理函数,当鼠标移出子元素且还没有移出父元素的时候,只会触发子元素的onmouseleave事件处理函数,父元素的事件处理函数不会触发,这说明onmouseleave不会产生冒泡现象。
onmouseleave事件详解,这样的场景在实际项目中还是用的比较多的,关于onmouseleave事件详解就介绍到这了。
onmouseleave事件详解属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98546.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: javascript搜索关键字高亮效果
下一篇: 微信小程序之绑定点击事件实例详解