声明后鼠标拖动事怪无效？

hc_net 2014-03-14 10:32:08

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script language="javascript">

var currentResizeTdObj=null;

function MouseDownToResize(event,obj){

obj=obj||this;

event=event||window.event;

currentResizeTdObj=obj;

obj.mouseDownX=event.clientX;

obj.mouseDownY=event.clientY;

obj.tdW=obj.offsetWidth;

obj.tdH=obj.offsetHeight;

if(obj.setCapture) obj.setCapture();

else event.preventDefault();

}

function MouseMoveToResize(event){

if(!currentResizeTdObj) return ;

var obj=currentResizeTdObj;

event=event||window.event;

    if(!obj.mouseDownX) return false;

    if(obj.parentNode.rowIndex==0) {

      var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;

      if(newWidth>0) obj.style.width = newWidth;

    else obj.style.width =1;

}

if(obj.cellIndex==0){

      var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;

      if(newHeight>0) obj.style.height = newHeight;

    else obj.style.height =1;

}

}

function MouseUpToResize(){

if(!currentResizeTdObj) return;

if (currentResizeTdObj.releaseCapture) currentResizeTdObj.releaseCapture();

currentResizeTdObj=null;

}

//改变表格行列宽函数

function ResizeTable_Init(table,needChangeWidth,needChangeHeight)

{

if(!needChangeWidth && !needChangeHeight)

   return;

var oTh=table.rows[0];

if(needChangeWidth){

    for(var i=0;i<oTh.cells.length;i++)   {

       var cell=oTh.cells[i];

       cell.style.cursor="e-resize";

       cell.style.width=cell.offsetWidth;

       cell.onmousedown =MouseDownToResize;

    }

}

if(needChangeHeight){

    for(var j=0;j<table.rows.length;j++)   {

       var cell=table.rows[j].cells[0];

       cell.style.cursor="s-resize";

       cell.onmousedown =MouseDownToResize;

    }

}

if(needChangeWidth && needChangeHeight)

   oTh.cells[0].style.cursor="se-resize";

table.style.width=null;

table.style.tableLayout="fixed";

}

//函数块定义结束

</script>

<html>

<body onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();" >

<div style="font-size:10pt;">

</div>



<table border="1" id="table1" style="width:100%;background-color:#eeeeee;" >

<tr id="TH1">

<td >header1</td>

<td >header2</td>

<td >header3</td>

<td >header4</td>

<td >header5</td>

</tr>

<tr>

<td >1</td>

<td >1</td>

<td >1</td>

<td >1</td>

<td ><input type="text" name="T4" size="20" value="1"></td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >2</td>

<td ><input type="text" name="T4" size="20" value="2"></td>

</tr>

</table>

<script language ="javascript">

ResizeTable_Init(document.getElementById("table1"),true,true);

</script>

</body>

</html>

为何在 <!DOCTYPE html> 声明后拖动事件无效？
删除 <!DOCTYPE html> 后 IE8 无效，有朋友知道怎么解决吗？

<body onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();" > 这个事件在声明后无法拖动
谢谢

...全文

164 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

hc_net 2014-03-14

打赏
举报

非常的感谢问题解决了，难怪加了<!doctype html> IE10 和火狐上有问题。多谢了

Go 旅城通票 2014-03-14

打赏
举报

要记得加上px单位，以后设计left，top这种的属性，都要记得加px单位 function MouseMoveToResize(event) { if (!currentResizeTdObj) return; var obj = currentResizeTdObj; event = event || window.event; if (!obj.mouseDownX) return false; if (obj.parentNode.rowIndex == 0) { var newWidth = obj.tdW * 1 + event.clientX * 1 - obj.mouseDownX; if (newWidth > 0) obj.style.width = newWidth+'px'; else obj.style.width = 1; } if (obj.cellIndex == 0) { var newHeight = obj.tdH * 1 + event.clientY * 1 - obj.mouseDownY; if (newHeight > 0) obj.style.height = newHeight + 'px'; else obj.style.height = 1; } } function MouseUpToResize() { if (!currentResizeTdObj) return; if (currentResizeTdObj.releaseCapture) currentResizeTdObj.releaseCapture(); currentResizeTdObj = null; } //改变表格行列宽函数 function ResizeTable_Init(table, needChangeWidth, needChangeHeight) { if (!needChangeWidth && !needChangeHeight) return; var oTh = table.rows[0]; if (needChangeWidth) { for (var i = 0; i < oTh.cells.length; i++) { var cell = oTh.cells[i]; cell.style.cursor = "e-resize"; cell.style.width = cell.offsetWidth + 'px'; cell.onmousedown = MouseDownToResize; } } if (needChangeHeight) { for (var j = 0; j < table.rows.length; j++) { var cell = table.rows[j].cells[0]; cell.style.cursor = "s-resize"; cell.onmousedown = MouseDownToResize; } } if (needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor = "se-resize"; table.style.width = null; table.style.tableLayout = "fixed"; }