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