event 对象不支持此属性和方法的问题,在线等

lr2651 2007-05-27 11:03:24

环境: IE7 .NET1.1 WIN2003 IIS6
代码:
<div id="divMap" runat="server" style="CURSOR:crosshair;" onmousedown='down(window.event);'
onmouseup='up(window.event);' onmousemove='move(window.event);'>
<img id="imgMineMap" runat=server width="750" height=680 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<div id='rect' style='BORDER-RIGHT:#ff0000 1px solid; BORDER-TOP:#ff0000 1px solid; BORDER-LEFT:#ff0000 1px solid; BORDER-BOTTOM:#ff0000 1px solid; POSITION:absolute'></div>
</div>
<script language="javascript">
// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;

var rect = document.getElementById("rect");
// 设置默认值,目的是隐藏图层
rect.style.width = 0;
rect.style.height = 0;
rect.style.visibility = 'hidden';
//让你要画的图层位于最上层
rect.style.zIndex = 1000;

// 记录鼠标按下时的坐标
var downX = 0;
var downY = 0;
// 记录鼠标抬起时候的坐标
var mouseX2=downX;
var mouseY2=downY;

//处理鼠标按下事件
function down(event){
// 鼠标按下时才允许处理鼠标的移动事件
select = true;
//让你要画框的那个图层显示出来
//rect.style.visibility = 'visible';
// 取得鼠标按下时的坐标位置
downX = event.clientX;
downY = event.clientY;

//设置你要画的矩形框的起点位置
rect.style.left = downX;
rect.style.top = downY;
}

//鼠标抬起事件
function up(event){
//鼠标抬起,就不允许在处理鼠标移动事件
select = false;
//隐藏图层
rect.style.visibility = 'hidden';
}

//鼠标移动事件,最主要的事件
function move(event){

// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX;
mouseY2 = event.clientY;

// 设置拉框的大小
rect.style.width = Math.abs( mouseX2 - downX );
rect.style.height = Math.abs( mouseY2 - downY );

/*

这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.

*/
if(select){

rect.style.visibility = 'visible';

// A part
if( mouseX2 < downX && mouseY2 < downY ){
rect.style.left = mouseX2;
rect.style.top = mouseY2 ;
}

// B part
if( mouseX2 > downX && mouseY2 < downY){
rect.style.left = downX ;
rect.style.top = mouseY2;
}

// C part
if( mouseX2 < downX && mouseY2 > downY){
rect.style.left = mouseX2;
rect.style.top = downY ;
}

// D part
if( mouseX2 > downX && mouseY2 > downY ){
rect.style.left = downX ;
rect.style.top = downY;
}

}
/*
这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,
为了这两句话,为了实现鼠标拉框,我搞了几天的时间.
*/
window.event.cancelBubble = true;
window.event.returnValue = false;

function getDivOffsetLeft(){
var divMap = document.getElementById("divMap");
//var rect = document.getElementById("rect");
return divMap.offsetLeft;
}
function getDivOffsetTop(){
var divMap = document.getElementById("divMap");
//var rect = document.getElementById("rect");
return divMap.offsetTop;
}

}

function selectTool(obj)
{
switch(obj)
{
case "zoomin":
document.getElementById(obj).setAttribute("src", "images/ZoomIn2.gif");
document.getElementById("zoomout").setAttribute("src", "images/ZoomOut1.gif");
document.getElementById("move").setAttribute("src", "images/Move1.gif");
break;
case "zoomout":
document.getElementById(obj).setAttribute("src", "images/ZoomOut2.gif");
document.getElementById("zoomin").setAttribute("src", "images/ZoomIn1.gif");
document.getElementById("move").setAttribute("src", "images/Move1.gif");
break;
case "allshow":
document.getElementById("zoomout").setAttribute("src", "images/ZoomOut1.gif");
document.getElementById("zoomin").setAttribute("src", "images/ZoomIn1.gif");
document.getElementById("move").setAttribute("src", "images/Move1.gif");
break;
case "move":
document.getElementById(obj).setAttribute("src", "images/Move2.gif");
document.getElementById("zoomin").setAttribute("src", "images/ZoomIn1.gif");
document.getElementById("zoomout").setAttribute("src", "images/ZoomOut1.gif");
break;
}
}
</script>
这是我按照一个例子改的代码,实现鼠标框选操作,可是鼠标一经过DIV层,就会报告对象不支持此属性和方法的错误,离开.NET环境只写一个HTML文件则可以正常执行,郁闷,各位高手帮忙,如解决可再开帖给100分,谢谢!

...全文

527 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

cloudgamer 2007-05-28

打赏
举报

学习

gzdiablo 2007-05-28

打赏
举报

这是我按照一个例子改的代码,实现鼠标框选操作,可是鼠标一经过DIV层,就会报告对象不支持此属性和方法的错误,离开.NET环境只写一个HTML文件则可以正常执行

光看这一条就很有可能是因为你的客户端直接使用runat="server"的HTML元素的id导致的.最好客户端在调取runat="server"的元素时使用<%=xxx.ClientID%>来获取客户端的id.

<a runat="server" id="aa">

比如上面这个你客户端document.getElementById("aa")的话就可能找不到这个元素
要用document.getElementById("<%=aa.ClinetID%>");来获取

lizhizhe2000 2007-05-28