onmousemove、onmouseover、 onmouseup及onclick的区别

最新推荐文章于 2023-04-18 16:21:45 发布

茁然-v

最新推荐文章于 2023-04-18 16:21:45 发布

阅读量3.1k

点赞数

分类专栏： JS(ES) 文章标签：事件 js dom

本文链接：https://blog.csdn.net/liaozhongping/article/details/47057113

版权

JS(ES) 专栏收录该内容

63 篇文章 3 订阅

订阅专栏

时间上 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 οnmοusemοve="modelImport(this)" οnmοuseοut="$('modelImportDiv').style.visibility='hidden'">345</td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
<div id="modelImportDiv" style="background:#EAEAEA; visibility:hidden;">
  <table cellspacing="0" cellpadding="2" align="left">
    <tr>
      <td>  下载模板：</td>
      <td nowrap><a href="#" onClick="window.location.href='导入模板.xls'">账  户</a></td>
    </tr>
    <tr>
      <td>  导入文件：</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>

茁然-v

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
onmousemove、onmouseover、 onmouseup及onclick的区别

时间上 onmousemove 事件触发后，再触发 onmouseover 事件。按钮上不区分鼠标按钮。动作上 onmouseover 只在刚进入区域时触发。 onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。当鼠标移动很快时，可能不会触发这两个事件时间上 onmouseup 事件触发后，再触发 onclick 事件。按钮上
复制链接

扫一扫