通過mouseover,mouseout來觸發事件,才判斷鼠標是否在該區域。 但是這種方法的局限性就是,必須要觸發mouseover,或mouseout,mouseleave事件才能知道
今天研究了一下這個問題,也普及了一下知識吧。
方法一:
通過mouseover,mouseout來觸發事件,才判斷鼠標是否在該區域。 但是這種方法的局限性就是,必須要觸發mouseover,或mouseout,mouseleave事件才能知道。
代碼如下:
function chkIn()
{
div_1.innerText = "現在你把鼠標移入層了!";
div_1.style.font = "normal black";
}
function chkOut()
{
div_1.innerText = "現在你把鼠標移出層了!";
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 ';
}else{
str+= ' <鼠標位於層 '+obj.id+ '范圍之外> n ';
}
}
alert(str);
}
document.onclick=checkIn
方法三:
這個方法是最簡單的實用的。
代碼如下:
if(myDiv.contains(window.event.srcElement))
即 if(myDiv.contains(鼠標位置的元素對象))
具體情況還是要根據自己需要來選擇,我是調試了一下方法三,但是具體也沒使用上。 其他方法,繼續研究中。