JavaScript-鼠標事件（鼠標點擊鬆開移動效果）

時間 2019-11-12

標籤 javascript 鼠標事件點擊鬆開移動效果欄目 JavaScript 简体版

原文原文鏈接

鼠標和鍵盤事件是在頁面操做中使用最頻繁的操做，能夠利用鼠標事件在頁面中實現鼠標移動、單擊時的特殊效果，也能夠利用鍵盤來製做頁面的快捷鍵等。javascript

鼠標的單擊事件

單擊事件（onclick）是在鼠標單擊時被觸發的事件。單擊是指鼠標停留在對象上，按下鼠標鍵，在沒有移動鼠標的同時釋放鼠標鍵的這一完整過程。
單擊事件通常應用於 Button 對象、Checkbox 對象、Image 對象、Link 對象、Radio 對象、Reset對象和Submit對象，Button 對象通常只會用到 onclick事件處理程序，由於該對象不能從用戶那裏獲得任何信息，若是沒有onclick事件處理程序，按鈕對象將不會有任何做用。html

注意：
在使用對象的單去事做時，若是在對象上按下鼠標健，而後移動鼠標到對象外再鬆開鼠標,單擊事件無效。單擊事件必須在對象上按下鬆開後，纔會執行單擊事件的處理程序。
例子： 經過按鈕變換背景顏色。java

本實例經過單擊「變換背景」按鈕，動態地改變頁面的背景顏色，當用戶再次單擊按鈕時，頁面背景將以不一樣的顏色進行顯示。3d

代碼以下：code

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript">
			var arraycolor=new Array("olive","teal","red","blue","maroon","navy");
			var n=0;
			function turncolors(){
				if(n==(arraycolor.length-1)) n=0;
				n++;
				document.bgColor=arraycolor[n];
			}
		</script>
	</head>
	<body>
		<input type="button" name="Submit" value="背景變色" onclick="turncolors()"/>
	</body>
</html>

演示效果：htm

鼠標的鬆開或按下事件

鼠標的按下或鬆開事件分別是onmousedown和onmouseup事件。其中，onmousedown事件用於在鼠標按下時觸發事件處理程序，onmouseup 事件是在鼠標鬆開時觸發事件處理程序。在用鼠標單擊對象時，能夠用這兩個事件實現其動態效果。
例子：用事件製做超連接文本對象

本實例是用onmousedown和onmouseup事件將文本製做成相似於<a> (超連接)標記的功能，也就是在文本上按下鼠標時，改變文本的顏色，當在文本上鬆開鼠標時，恢復文本的默認顏色，井彈出一個空頁(能夠連接任意網頁)。運行結果如圖所示。
代碼：blog

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript" type="text/javascript">
			function mousedown(event){  //設置鼠標按下時的顏色
				var e=window.event;
				var obj=e.srcElement;
				obj.style.color='red';
			}
			function mouseup(event){  //設置鼠標鬆開時的顏色
				var e=window.event;
				var obj=e.srcElement;
				obj.style.color='blue';
			}
		</script>
	</head>
	<body >
		<p style="color: green;" onmousedown="mousedown()" onmouseup="mouseup()">
			改變
		</p>	
	</body>
</html>

鼠標的移入/移出事件

鼠標的移入和移出事件分別是onmouseover和onmouseout事件。其中，onmouseover 事件在鼠標移動到對象上方時觸發事件處理程序，onmouseout事件在鼠標移出對象上方時觸發事件處理程序。能夠用這兩個事件實如今指定的對象上移動鼠標時，其對象的動態效果。seo

鼠標移動事件

鼠標移動事件(onmousemove) 是鼠標在頁面上進行移動時觸發事件處理程序，能夠在該事件中用document對象實時讀取鼠標在頁面中的位置。
例子：在狀態欄中顯示鼠標在頁面中的當前位置事件

本實例是鼠標在頁面中移動時，在頁面的狀態欄中顯示當前鼠標在頁面上的位置，也就是(x,y)值。

代碼：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var x=0;y=0;
		function mouseplace(){
			x=window.event.x;
			y=window.event.y;
			window.status="X: "+x+"   Y: "+y+"  ";
		}
		document.onmousemove=mouseplace();  //讀取鼠標在頁面中的位置
	</script>
	<body>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。