鼠標事件由鼠標或相似的用戶動作觸發的事件,以下常用的鼠標事件屬性
onmousedown 當按下鼠標按鈕觸發事件
onmouseup 但鬆開鼠標按鈕觸發事件
onclick 當單擊鼠標觸發事件
ondbclick 當雙擊鼠標觸發事件
onmousemove 當鼠標指針移動時觸發事件
onmouseover 當鼠標移動至元素之上觸發事件
onmouseout 當鼠標移動出元素之外觸發事件
onscroll 當滾動元素的滾動條時觸發事件
onmousewheel當轉動鼠標滾輪時觸發事件
ondragstart 當拖放操作開始時被拖放元素觸發事件,一般在事件處理函數中設置拖放的數據源
ondrag 拖放過程中被拖放元素觸發事件
ondragenter 拖放過程中鼠標進入目標元素內移動時,目標元素觸發事件
ondragover 拖放過程中鼠標在目標元素內移動時,目標元素觸發事件
ondragleave 拖放過程中鼠標離開目標元素是,目標元素觸發該事件
ondrop 當拖放元素投放時,拖放的目標元素觸發該事件
ondragend 當拖放操作結束時被拖放元素出發該事件
以下是實例:
<html>
<head>
<meta charset="utf-8">
<title>拖放事件</title>
<style type="text/css">
#div1{width: 200px;height: 200px;border: 2px solid #aaaaaa; }
</style>
<script type="text/javascript">
function allowDrag(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("text/plain",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p id="p1">可以將下面的圖片投放到邊框中</p>
<div id="div1" οndragοver="allowDrag(event)" οndrοp="drop(event)"></div>
<img id="img1" src="img/p1.png" draggable="true" οndragstart="drag(event)">
</body>
</html>