onmousemove、onmouseover、 onmouseup及onclick的区别

时间上 onmousemove 事件触发后,再触发 onmouseover 事件。

按钮上不区分鼠标按钮。

动作上 onmouseover 只在刚进入区域时触发。 onmousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。

当鼠标移动很快时,可能不会触发这两个事件

时间上 onmouseup 事件触发后,再触发 onclick 事件。

按钮上 onmouseup 检测鼠标任意键(包含滚轮),onclick只有在鼠标左键时触发。

动作上 onmouseup 侧重于检测鼠标弹起,而 onclick 检测鼠标按下并弹起。在文档任意区域按下鼠标,甚至用 Alt+Tab 切换任务,再 Alt+Tab 切换回来,再将指针移到控件上,放开鼠标,仍可触发 onmouseup 事件;而 onclick 必须在同一元素上按下并释放(在鼠标按下与释放之间切换任务时,IE 不再承认 onclick,NS 则仍承认)。

//有用的td批注

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="js/common.js"></script>
<script>
function modelImport(obj)
{
 var Menu=$("modelImportDiv");
 var oRect=obj.getBoundingClientRect(); // getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
 var Right=oRect.right;
 var Top=oRect.top;
 var x=document.documentElement.scrollLeft+event.clientX;//鼠标x坐标
 var y=document.documentElement.scrollTop+event.clientY;//鼠标y坐标
 if(x>=Right-5 && y<=eval_r(Top)+5)//5*5为背景图的大小
  Menu.style.visibility='visible';
 else
  Menu.style.visibility='hidden';
}
</script>
</head>
<body>
<table width="200" border="1">
  <tr>
    <td onmousemove="modelImport(this)" onmouseout="$('modelImportDiv').style.visibility='hidden'">345</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
<div id="modelImportDiv" style="background:#EAEAEA; visibility:hidden;">
  <table cellspacing="0" cellpadding="2" align="left">
    <tr>
      <td>&nbsp;&nbsp;下载模板:</td>
      <td nowrap><a href="#" onClick="window.location.href='导入模板.xls'">账  户</a></td>
    </tr>
    <tr>
      <td>&nbsp;&nbsp;导入文件:</td>
      <td nowrap><input type="file" name="StructureFile" id="StructureFile" size="18" /></td>
    </tr>
    <tr>
      <td align="center" colspan="2"><input value="导 入" id="btnModelImport" onClick="filecheck()" type="button">
        </input>
        <input value="取 消" id="btnClose" onClick="$('modelImportDiv').style.visibility='hidden'" type="button">
        </input></td>
    </tr>
  </table>
</div>



 

你可能感兴趣的:(js,事件,dom)