如何判斷鼠標(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)文章
js 效率組裝字符串,主要是利用了數(shù)組原理。2009-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)購物車的計算方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下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，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了Javascript中的call()方法介紹,本文講解了Call() 語法、Call() 參數(shù)、Javascript中的call()方法、Call()方法的實例等內(nèi)容,需要的朋友可以參考下2015-03-03
JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
JS實現(xiàn)隨機(jī)生成10個手機(jī)號的方法示例
這篇文章主要介紹了JS實現(xiàn)隨機(jī)生成10個手機(jī)號的方法,涉及javascript數(shù)值運(yùn)算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
js中關(guān)于require與import的區(qū)別及說明
這篇文章主要介紹了js中關(guān)于require與import的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
JS target與currentTarget區(qū)別說明
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時候，兩個的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當(dāng)前事件活動的對象（一般為父級）。2011-08-08