event 对象不支持此属性和方法的问题,在线等
环境: 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分,谢谢!
[解决办法]
可能与指令有关,也就是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
[解决办法]
这是我按照一个例子改的代码,实现鼠标框选操作,可是鼠标一经过DIV层,就会报告对象不支持此属性和方法的错误,离开.NET环境只写一个HTML文件则可以正常执行
光看这一条就很有可能是因为你的客户端直接使用runat= "server "的HTML元素的id导致的.最好客户端在调取runat= "server "的元素时使用 <%=xxx.ClientID%> 来获取客户端的id.
<a runat= "server " id= "aa ">
比如上面这个 你客户端document.getElementById( "aa ")的话就可能找不到这个元素
要用document.getElementById( " <%=aa.ClinetID%> ");来获取
