鼠標事件之購物筐實例

鼠標事件
鼠標事件由鼠標或相似的用戶動作觸發的事件,以下常用的鼠標事件屬性
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>
        


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章