如何判斷鼠標是否在DIV的區(qū)域內(nèi)
更新時間：2013年11月13日 10:08:52 作者：
通過mouseover，mouseout來觸發(fā)事件，才判斷鼠標是否在該區(qū)域。 但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道
今天研究了一下這個問題，也普及了一下知識吧。
方法一：
通過mouseover，mouseout來觸發(fā)事件，才判斷鼠標是否在該區(qū)域。 但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道。
復制代碼 代碼如下:
function chkIn()
{
div_1.innerText = "現(xiàn)在你把鼠標移入層了！";
div_1.style.font = "normal black";
}
function chkOut()
{
div_1.innerText = "現(xiàn)在你把鼠標移出層了！";
div_1.style.font = "bold red";
}
復制代碼 代碼如下:
<div id="div_1" style="background-color:lightblue; width:400px; height:300px; "
onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
</div>
方法二：
復制代碼 代碼如下:
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+= ' <鼠標位于層 '+obj.id+ '范圍之內(nèi)> \n ';
}else{
str+= ' <鼠標位于層 '+obj.id+ '范圍之外> \n ';
}
}
alert(str);
}
document.onclick=checkIn
方法三：
這個方法是最簡單的實用的。
復制代碼 代碼如下:
if(myDiv.contains(window.event.srcElement))
即 if(myDiv.contains(鼠標位置的元素對象))
具體情況還是要根據(jù)自己需要來選擇，我是調(diào)試了一下方法三，但是具體也沒使用上。 其他方法，繼續(xù)研究中。
相關(guān)文章
js 效率組裝字符串,主要是利用了數(shù)組原理。2009-12-12
這篇文章主要為大家詳細介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)購物車的計算方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下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，文章圍繞主題展開詳細的內(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)換為鏈表的方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了JS實現(xiàn)隨機生成10個手機號的方法,涉及javascript數(shù)值運算與隨機數(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在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的，而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）。2011-08-08