如何判斷鼠標(biāo)是否在DIV的區(qū)域內(nèi)
更新時(shí)間：2013年11月13日 10:08:52 作者：
通過(guò)mouseover，mouseout來(lái)觸發(fā)事件，才判斷鼠標(biāo)是否在該區(qū)域。 但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道
今天研究了一下這個(gè)問(wèn)題，也普及了一下知識(shí)吧。
方法一：
通過(guò)mouseover，mouseout來(lái)觸發(fā)事件，才判斷鼠標(biāo)是否在該區(qū)域。 但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道。
復(fù)制代碼 代碼如下:
function chkIn()
{
div_1.innerText = "現(xiàn)在你把鼠標(biāo)移入層了！";
div_1.style.font = "normal black";
}
function chkOut()
{
div_1.innerText = "現(xiàn)在你把鼠標(biāo)移出層了！";
div_1.style.font = "bold red";
}
復(fù)制代碼 代碼如下:
<div id="div_1" style="background-color:lightblue; width:400px; height:300px; "
onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
</div>
方法二：
復(fù)制代碼 代碼如下:
function checkIn(e){
var x=window.event.clientX;
var y=window.event.clientY;
var str= ' ';
for(i=0;i <document.body.children.length;i++){
var obj=document.body.children[i];
if(x> obj.offsetLeft
&&x <(obj.offsetLeft+obj.clientWidth)
&&y> obj.offsetTop
&&y <(obj.offsetTop+obj.clientHeight)){
str+= ' <鼠標(biāo)位于層 '+obj.id+ '范圍之內(nèi)> \n ';
}else{
str+= ' <鼠標(biāo)位于層 '+obj.id+ '范圍之外> \n ';
}
}
alert(str);
}
document.onclick=checkIn
方法三：
這個(gè)方法是最簡(jiǎn)單的實(shí)用的。
復(fù)制代碼 代碼如下:
if(myDiv.contains(window.event.srcElement))
即 if(myDiv.contains(鼠標(biāo)位置的元素對(duì)象))
具體情況還是要根據(jù)自己需要來(lái)選擇，我是調(diào)試了一下方法三，但是具體也沒(méi)使用上。 其他方法，繼續(xù)研究中。
您可能感興趣的文章:
- javascript 設(shè)置某DIV區(qū)域內(nèi)的checkbox復(fù)選框
- DIV外區(qū)域Click后關(guān)閉DIV的實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域
- window.print打印指定div指定網(wǎng)頁(yè)指定區(qū)域的方法
- jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法
- jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見(jiàn)
相關(guān)文章
js 效率組裝字符串,主要是利用了數(shù)組原理。2009-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下2016-05-05
js實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算的方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車(chē)的計(jì)算方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在JavaScript中,有多種方法可以合并數(shù)組,本文主要介紹了8種方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感興趣的可以了解一下2023-08-08
這篇文章主要介紹了基于JavaScript介紹性能爆表的SolidJS，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了Javascript中的call()方法介紹,本文講解了Call() 語(yǔ)法、Call() 參數(shù)、Javascript中的call()方法、Call()方法的實(shí)例等內(nèi)容,需要的朋友可以參考下2015-03-03
JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法,涉及javascript數(shù)值運(yùn)算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
js中關(guān)于require與import的區(qū)別及說(shuō)明
這篇文章主要介紹了js中關(guān)于require與import的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
JS target與currentTarget區(qū)別說(shuō)明
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象（一般為父級(jí)）。2011-08-08