html5的滑鼠事件

2020-10-12 10:07:16

html5的滑鼠事件，常見的滑鼠事件有：
onclick 當單擊滑鼠時執行指令碼
ondblclick 當雙擊滑鼠時執行指令碼
ondrag 當拖動元素時執行指令碼
ondragend 當拖動操作結束時執行指令碼
ondragenter 當元素被拖動至有效的拖放目標時執行指令碼
ondragleave 當元素離開有效拖放目標時執行指令碼
ondragover 當元素被拖動至有效拖放目標上方時執行指令碼
ondragstart 當拖動操作開始時執行指令碼
ondrop 當被拖動元素正在被拖放時執行指令碼
onmousedown 當按下滑鼠按鈕時執行指令碼
onmousemove 當滑鼠指標移動時執行指令碼
onmouseout 當滑鼠指標移出元素時執行指令碼
onmouseover 當滑鼠指標移至元素之上時執行指令碼
onmouseup 當鬆開滑鼠按鈕時執行指令碼
onmousewheel 當轉動滑鼠滾輪時執行指令碼
onscroll 當捲動元素捲動元素的卷軸時執行指令碼

工具/材料

43版本的火狐瀏覽器

任意一款文字編輯器

操作方法

01

滑鼠事件，我們這裡用ondblclick（當雙擊滑鼠時執行指令碼）來舉例。
首先，新建一個html檔案，程式碼：
<!DOCTYPE HTML>
<html>
<body>
<h1>fff</h1>
</body>
</html>
如圖：
02

接下來，在h1的屬性那裡新增滑鼠事件，程式碼：
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
function run(){
alert("vvv");
}
</script>
<h1 ondblclick="run();">fff</h1>
</body>
</html>
分析：<h1 ondblclick="run();">fff</h1>這句的意思是雙擊fff就會執行run()函數，效果如圖：
03

其他的滑鼠事件同理，這裡不一一演示。
End

特別提示

希望對你有幫助！

html5的滑鼠事件

工具/材料

操作方法

特別提示

熱門文章