如何判断鼠标位置是否在一个的范围内？ 本文转载自  Naola2001  查看原文  2002-07-06  10    div/ 判断/

时间：2022-10-20 10:20:45
如何判断鼠标位置是否在一个<DIV>的范围内？
要考虑到有滚动条的情况！

11 个解决方案

#1

<a id=a1>&nbsp;</a>
<div style="width:300;height:150;background:red;overflow:scroll" onmouseover=a1.innerHTML='鼠标在层里' onmouseout=a1.innerHTML='鼠标不在层里'></div>

#2

很不错！

#3

我想他要的是这个,得到当前鼠标位置的元素对象。 
<body>
<script>
function document.onmouseover(){
var loEL = document.elementFromPoint(event.clientX,event.clientY);
test.innerHTML = loEL.tagName;
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>

#4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
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
//-->
</SCRIPT>
</HEAD>

<BODY id=body>

<div id="Layer1" style="position:absolute; left:260px; top:117px; width:500px; height:500px; z-index:1; background-color: red; layer-background-color: red; border: 1px none #000000;">
</div>
<div id="Layer2" style="position:absolute; left:500px; top:150px; width:300px; height:300px; z-index:1; background-color: green; layer-background-color: green; border: 1px none #000000"></div>
<div id="Layer3" style="position:absolute; left:100px; top:10px; width:200px; height:200px; z-index:1; background-color: yellow; border: 1px none #000000"></div>
<table id=table1 width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</BODY>
</HTML>

#5

if(myDiv.contains(window.event.srcElement))

#6

to qiushuiwuhen(秋水无恨):

if(myDiv.contains(鼠标位置？？))

#7

to bencalie(Bencalie)
if(myDiv.contains(鼠标位置的元素对象))

还是秋水高，崇拜中....

#8

1.
<body>
<script>
function document.onmouseover(){
var loEL = document.elementFromPoint(event.clientX,event.clientY);
if (loEL.uniqueID==test.uniqueID)
test.innerHTML = "in";
else
test.innerHTML = "out";
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>


2.
<body>
<script>
function document.onmouseover(){
if (test.contains(window.event.srcElement))
test.innerHTML = "in";
else
test.innerHTML = "out";
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>

#9

又学到了，改进
function checkIn(e){
try{
if(eval(window.event.srcElement.id+'.contains(window.event.srcElement)'))alert("鼠标在"+window.event.srcElement.id+"中")
}
catch(x){}
}
document.onclick=checkIn
呵呵，我就是爱举一反三，别见怪

#10

嗯，高手就是高手，长进不少！谢谢各位

#11

牛啊，，可怜我刚开始学jscript，，，什么都不懂。。

#1

<a id=a1>&nbsp;</a>
<div style="width:300;height:150;background:red;overflow:scroll" onmouseover=a1.innerHTML='鼠标在层里' onmouseout=a1.innerHTML='鼠标不在层里'></div>

#2

很不错！

#3

我想他要的是这个,得到当前鼠标位置的元素对象。 
<body>
<script>
function document.onmouseover(){
var loEL = document.elementFromPoint(event.clientX,event.clientY);
test.innerHTML = loEL.tagName;
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>

#4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
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
//-->
</SCRIPT>
</HEAD>

<BODY id=body>

<div id="Layer1" style="position:absolute; left:260px; top:117px; width:500px; height:500px; z-index:1; background-color: red; layer-background-color: red; border: 1px none #000000;">
</div>
<div id="Layer2" style="position:absolute; left:500px; top:150px; width:300px; height:300px; z-index:1; background-color: green; layer-background-color: green; border: 1px none #000000"></div>
<div id="Layer3" style="position:absolute; left:100px; top:10px; width:200px; height:200px; z-index:1; background-color: yellow; border: 1px none #000000"></div>
<table id=table1 width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</BODY>
</HTML>

#5

if(myDiv.contains(window.event.srcElement))

#6

to qiushuiwuhen(秋水无恨):

if(myDiv.contains(鼠标位置？？))

#7

to bencalie(Bencalie)
if(myDiv.contains(鼠标位置的元素对象))

还是秋水高，崇拜中....

#8

1.
<body>
<script>
function document.onmouseover(){
var loEL = document.elementFromPoint(event.clientX,event.clientY);
if (loEL.uniqueID==test.uniqueID)
test.innerHTML = "in";
else
test.innerHTML = "out";
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>


2.
<body>
<script>
function document.onmouseover(){
if (test.contains(window.event.srcElement))
test.innerHTML = "in";
else
test.innerHTML = "out";
}
</script>
<div id="test" style="width:300;height:150;background:red;overflow:scroll"></div>
</body>

#9

又学到了，改进
function checkIn(e){
try{
if(eval(window.event.srcElement.id+'.contains(window.event.srcElement)'))alert("鼠标在"+window.event.srcElement.id+"中")
}
catch(x){}
}
document.onclick=checkIn
呵呵，我就是爱举一反三，别见怪

#10

嗯，高手就是高手，长进不少！谢谢各位

#11

牛啊，，可怜我刚开始学jscript，，，什么都不懂。。
标签：

相关文章