如何判斷鼠標(biāo)是否在DIV的區(qū)域內(nèi)
更新時間：2013年11月13日 10:08:52 作者：
通過mouseover，mouseout來觸發(fā)事件，才判斷鼠標(biāo)是否在該區(qū)域。 但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道
今天研究了一下這個問題，也普及了一下知識吧。
方法一：
通過mouseover，mouseout來觸發(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
方法三：
這個方法是最簡單的實用的。
復(fù)制代碼 代碼如下:
if(myDiv.contains(window.event.srcElement))
即 if(myDiv.contains(鼠標(biāo)位置的元素對象))
具體情況還是要根據(jù)自己需要來選擇，我是調(diào)試了一下方法三，但是具體也沒使用上。 其他方法，繼續(xù)研究中。
相關(guān)文章
javascript日期字符串轉(zhuǎn)換為時間戳的5種方法總結(jié)
在JavaScript中將日期字符串轉(zhuǎn)換為時間戳是一個常見需求,本文介紹了五種實現(xiàn)此轉(zhuǎn)換的方法,包括使用Date對象、正則表達式輔助解析、Date.parse()函數(shù)以及第三方庫如moment.js和date-fns,這些方法適用于不同格式的日期字符串,需要的朋友可以參考下2024-09-09
JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了JavaScript函數(shù)的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法,下面通過本文給大家詳細說明一下，需要的朋友可以參考下2016-12-12
在js中,對象是鍵值對的集合,可以通過很多種方式創(chuàng)建； 本文給大家介紹了六種創(chuàng)建方式：對象字面量、構(gòu)造函數(shù)、Object.create()、工廠函數(shù)、class、單例模式,需要的朋友可以參考下2025-04-04
js中有六種數(shù)據(jù)類型，包括五種基本數(shù)據(jù)類型（Number,String,Boolean,Null,Undefined）,和一種混合數(shù)據(jù)類型（Object）。下面就跟著小編一起來看下吧2016-12-12
微信小程序使用 official-account 組件實現(xiàn)一鍵跳轉(zhuǎn)公眾號
本文詳細介紹了如何在微信小程序中實現(xiàn)一鍵跳轉(zhuǎn)到公眾號的功能,包括準(zhǔn)備工作、使用`<official-account>`組件實現(xiàn)跳轉(zhuǎn)、關(guān)聯(lián)小程序與公眾號的方法,以及常見錯誤及解決方案,通過本文的指導(dǎo),開發(fā)者可以順利實現(xiàn)這一功能,提升用戶體驗2024-11-11
這篇文章主要介紹了原生js如何實現(xiàn)表單驗證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了JS實現(xiàn)隨機生成10個手機號的方法,涉及javascript數(shù)值運算與隨機數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
BootStrap Table實現(xiàn)server分頁序號連續(xù)顯示功能（當(dāng)前頁從上一頁的結(jié)束序號開始）
這篇文章主要介紹了BootStrap Table實現(xiàn)server分頁序號連續(xù)顯示功能（當(dāng)前頁從上一頁的結(jié)束序號開始）,需要的朋友可以參考下2017-09-09