JavaScript鼠標(biāo)移動(dòng)事件以及實(shí)戰(zhàn)案例

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

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

一、鼠標(biāo)點(diǎn)擊事件

1.onclick單擊事件

鼠標(biāo)單擊時(shí)事件處理函數(shù)

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

2.ondblclick雙擊事件

鼠標(biāo)雙擊時(shí)事件處理函數(shù)

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

3. onmousedown鼠標(biāo)按下事件

當(dāng)鼠標(biāo)被按下后事件處理函數(shù)

4. onmouseup鼠標(biāo)松開事件

當(dāng)鼠標(biāo)被松開后事件處理函數(shù)

案例:

二、鼠標(biāo)移動(dòng)事件

1.onmouseover移入事件

鼠標(biāo)移動(dòng)都某個(gè)指點(diǎn)的HTML標(biāo)簽上時(shí)觸發(fā)的事件

2.onmouseout移出事件

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

3.onmousemove移動(dòng)事件

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

4.mouseenter移入事件

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

5.mouseleave移出事件

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

三、案列：

效果圖如下:

完整代碼如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>鼠標(biāo)跟隨</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;/* 絕對(duì)定位 */
				left: 0;
				top: 0;
				background-color: rgba(0,0,0,0.666);
				color: white;
				padding: 10px;
				display: none;/* 隱藏 */
				pointer-events: none;/* 不對(duì)鼠標(biāo)事件作出反應(yīng) */
			}
		</style>
	</head>
	<body>
		<div id="div_1">
			<img src="img/1.jpg" alt="">
			<p>
				<strong>簡(jiǎn)介</strong>
				<span>買建材上京東！京東</span>
			</p>
		</div>
		<script type="text/javascript">
			//獲取div標(biāo)簽
			var div_1 = document.getElementById("div_1");
			//給div_1綁定事件:onmouseover:鼠標(biāo)移入事件
			div_1.onmouseover = function(){
				//將p標(biāo)簽顯示出來，故需要將display的值設(shè)置為block
				document.querySelector("p").style.display = "block";
			}
			//onmouseout:鼠標(biāo)從元素上移開時(shí)觸發(fā)的事件
			div_1.onmouseout = function(){
				將p標(biāo)簽顯示出來，故需要將display的值設(shè)置為none
				document.querySelector("p").style.display = "none";
			}
			//onmousemove:鼠標(biāo)從元素上移動(dòng)時(shí)觸發(fā)的事件
			div_1.onmousemove = function(){
				document.querySelector("p").style.left =event.offsetX + "px";
				document.querySelector("p").style.top =event.offsetY + "px";
			}
		</script>
	</body>
</html>

總結(jié)

到此這篇關(guān)于JavaScript鼠標(biāo)移動(dòng)事件以及實(shí)戰(zhàn)案例的文章就介紹到這了,更多相關(guān)JS鼠標(biāo)移動(dòng)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: