JavaScript鼠標移動事件以及實戰(zhàn)案例

更新時間：2023年05月08日 11:44:39 作者：愛吃漢堡的代碼人

在學習JS中我對鼠標移動事件進行了一些總結(jié),需要的可以作參考,下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標移動事件以及實戰(zhàn)案例的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、鼠標點擊事件

1.onclick單擊事件

鼠標單擊時事件處理函數(shù)

<input type="button" id="bt" value="點擊">
<script>
//找到按鈕并設(shè)置點擊事件
? ?document.getElementById("bt").onclick ?= function (){
? ? ? ? //被點擊后彈出彈出框
? ? ? ?alert("按鈕被點擊")
? ?}
</script>

2.ondblclick雙擊事件

鼠標雙擊時事件處理函數(shù)

<input type="button" id="bt" value="點擊">
<script>
//找到按鈕并設(shè)置雙擊擊事件
? ?document.getElementById("bt").ondblclick ?= function (){
? ? ? ? //被點擊兩次后彈出彈出框
? ? ? ?alert("按鈕被點擊")
? ?}
?</script>

3. onmousedown鼠標按下事件

當鼠標被按下后事件處理函數(shù)

4. onmouseup鼠標松開事件

當鼠標被松開后事件處理函數(shù)

案例:

二、鼠標移動事件

1.onmouseover移入事件

鼠標移動都某個指點的HTML標簽上時觸發(fā)的事件

2.onmouseout移出事件

鼠標從HTML標簽上移開時觸發(fā)的事件

3.onmousemove移動事件

鼠標指針在該元素的上面移動就觸發(fā)

4.mouseenter移入事件

于onmouseover相同但mouseenter事件只執(zhí)行一次

5.mouseleave移出事件

于onmouseout相同但mouseenter事件只執(zhí)行一次

三、案列：

效果圖如下:

完整代碼如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>鼠標跟隨</title>
		<style type="text/css">
			div{
				position: relative;
				width: 360px;
				height: 511px;
			}
			img{
				width: 360px;
				border-radius: 5px;/* 設(shè)置圓角 */
			}
			p{
				width: 100px;
				height: 30px;
				position: absolute;/* 絕對定位 */
				left: 0;
				top: 0;
				background-color: rgba(0,0,0,0.666);
				color: white;
				padding: 10px;
				display: none;/* 隱藏 */
				pointer-events: none;/* 不對鼠標事件作出反應 */
			}
		</style>
	</head>
	<body>
		<div id="div_1">
			<img src="img/1.jpg" alt="">
			<p>
				<strong>簡介</strong>
				<span>買建材上京東！京東</span>
			</p>
		</div>
		<script type="text/javascript">
			//獲取div標簽
			var div_1 = document.getElementById("div_1");
			//給div_1綁定事件:onmouseover:鼠標移入事件
			div_1.onmouseover = function(){
				//將p標簽顯示出來，故需要將display的值設(shè)置為block
				document.querySelector("p").style.display = "block";
			}
			//onmouseout:鼠標從元素上移開時觸發(fā)的事件
			div_1.onmouseout = function(){
				將p標簽顯示出來，故需要將display的值設(shè)置為none
				document.querySelector("p").style.display = "none";
			}
			//onmousemove:鼠標從元素上移動時觸發(fā)的事件
			div_1.onmousemove = function(){
				document.querySelector("p").style.left =event.offsetX + "px";
				document.querySelector("p").style.top =event.offsetY + "px";
			}
		</script>
	</body>
</html>