onmouseleave事件詳解
本章節通過程式碼例項介紹一下onmouseleave事件的用法。
當滑鼠移出指定元素的時候就會觸發此事件。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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.softwhy.com"; } } </script> </head> <body> <div id="box"> <div id="antzone"></div> </div> <div id="show"></div> </body> </html>
上面的程式碼演示了onmouseleave事件,當滑鼠離開antzone元素的時候就會觸發此事件。
再來看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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不會產生冒泡現象。
相關文章
- delphi OnMouseLeave 事件不靈敏及解決之道事件
- onmouseleave和onmouseout事件的區別事件
- Js 事件詳解JS事件
- DOM 事件詳解事件
- JavaScript事件詳解JavaScript事件
- 委託與事件-事件詳解(二)事件
- 事件迴圈詳解事件
- jQuery 事件用法詳解jQuery事件
- Oracle等待事件詳解Oracle事件
- nodejs事件和事件迴圈詳解NodeJS事件
- Redis 事件機制詳解Redis事件
- 10046事件詳解事件
- JavaScript 事件委託詳解JavaScript事件
- ORACLE等待事件詳解(轉)Oracle事件
- jQuery事件系統詳解jQuery事件
- JS事件迴圈詳解JS事件
- Vue事件修飾符詳解Vue事件
- React 進階(四)事件詳解React事件
- Android輸入事件詳解Android事件
- Spring事件機制詳解Spring事件
- Node模組之事件(events)詳解事件
- JavaScript之事件處理詳解JavaScript事件
- 原生js頁面事件詳解JS事件
- 詳解 Solidity 事件Event - 完全搞懂事件的使用Solid事件
- JavaScript 事件迴圈詳解(翻譯)JavaScript事件
- 事件委託詳解最新版事件
- Vue入門—事件與方法詳解Vue事件
- PB TreeView 屬性,事件詳解(轉)View事件
- 詳解C#委託與事件C#事件
- 深入理解Oracle除錯事件:10046事件詳解Oracle除錯事件
- android事件分發機制詳解Android事件
- 委託與事件-委託詳解(一)事件
- 詳解C#委託和事件(一)C#事件
- 詳解C#委託和事件(二)C#事件
- 移動端事件touchstart、touchmove、touchend詳解事件
- JavaScript學習總結(九)事件詳解JavaScript事件
- jquery的事件名稱空間詳解jQuery事件
- 最詳細的JavaScript和事件解讀JavaScript事件