JavaScript鼠標(biāo)移動(dòng)事件以及實(shí)戰(zhàn)案例
一、鼠標(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)簽顯示出來(lái),故需要將display的值設(shè)置為block document.querySelector("p").style.display = "block"; } //onmouseout:鼠標(biāo)從元素上移開時(shí)觸發(fā)的事件 div_1.onmouseout = function(){ 將p標(biāo)簽顯示出來(lái),故需要將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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript學(xué)習(xí)筆記--常用的互動(dòng)方法
本文對(duì)JavaScript中常用的互動(dòng)方法進(jìn)行實(shí)例分析介紹,圖文并茂,有需要的朋友可以看下2016-12-12基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10jqgrid 表格數(shù)據(jù)導(dǎo)出實(shí)例
jqgrid并沒有自帶導(dǎo)出表格數(shù)據(jù)的方法,這里就自己實(shí)現(xiàn)了一個(gè),嘗試過(guò)在頁(yè)面直接將數(shù)據(jù)導(dǎo)出,發(fā)現(xiàn)只有IE下可以通過(guò)調(diào)用saveas來(lái)實(shí)現(xiàn),但是別的瀏覽器不支持,于是考慮將數(shù)據(jù)傳回后臺(tái),然后后臺(tái)返回下載文件來(lái)實(shí)現(xiàn)2013-11-11javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合,可以是javascript對(duì)string的功能更多2008-06-06javascript提取內(nèi)容到作為文章簡(jiǎn)介的代碼
javascript提取文本框內(nèi)容到另一個(gè)文本框,經(jīng)常被用來(lái)做內(nèi)容簡(jiǎn)介的讀取,這樣編輯就不用每次都去處理一篇文章的簡(jiǎn)介了。2011-01-01JS 有趣的eval優(yōu)化輸入驗(yàn)證實(shí)例代碼
這篇文章介紹了eval優(yōu)化輸入驗(yàn)證實(shí)例代碼,有需要的朋友可以參考一下2013-09-09