JavaScript鼠標(biāo)移動事件以及實戰(zhàn)案例
一、鼠標(biāo)點擊事件
1.onclick單擊事件
鼠標(biāo)單擊時事件處理函數(shù)
<input type="button" id="bt" value="點擊"> <script> //找到按鈕并設(shè)置點擊事件 ? ?document.getElementById("bt").onclick ?= function (){ ? ? ? ? //被點擊后彈出彈出框 ? ? ? ?alert("按鈕被點擊") ? ?} </script>
2.ondblclick雙擊事件
鼠標(biāo)雙擊時事件處理函數(shù)
<input type="button" id="bt" value="點擊"> <script> //找到按鈕并設(shè)置雙擊擊事件 ? ?document.getElementById("bt").ondblclick ?= function (){ ? ? ? ? //被點擊兩次后彈出彈出框 ? ? ? ?alert("按鈕被點擊") ? ?} ?</script>
3. onmousedown鼠標(biāo)按下事件
當(dāng)鼠標(biāo)被按下后事件處理函數(shù)
4. onmouseup鼠標(biāo)松開事件
當(dāng)鼠標(biāo)被松開后事件處理函數(shù)
案例:
二、鼠標(biāo)移動事件
1.onmouseover移入事件
鼠標(biāo)移動都某個指點的HTML標(biāo)簽上時觸發(fā)的事件
2.onmouseout移出事件
鼠標(biāo)從HTML標(biāo)簽上移開時觸發(fā)的事件
3.onmousemove移動事件
鼠標(biāo)指針在該元素的上面移動就觸發(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;/* 絕對定位 */ left: 0; top: 0; background-color: rgba(0,0,0,0.666); color: white; padding: 10px; display: none;/* 隱藏 */ pointer-events: none;/* 不對鼠標(biāo)事件作出反應(yīng) */ } </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標(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)從元素上移開時觸發(fā)的事件 div_1.onmouseout = function(){ 將p標(biāo)簽顯示出來,故需要將display的值設(shè)置為none document.querySelector("p").style.display = "none"; } //onmousemove:鼠標(biāo)從元素上移動時觸發(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)移動事件以及實戰(zhàn)案例的文章就介紹到這了,更多相關(guān)JS鼠標(biāo)移動事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript學(xué)習(xí)筆記--常用的互動方法
本文對JavaScript中常用的互動方法進(jìn)行實例分析介紹,圖文并茂,有需要的朋友可以看下2016-12-12基于JavaScript實現(xiàn)簡單抽獎功能代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)簡單抽獎功能代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合,可以是javascript對string的功能更多2008-06-06