JS

2024-01-20 11:04| 来源: 网络整理| 查看: 265

鼠标事件事件类型说明click单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件dblclick双击鼠标左键时发生，如果右键也按下则不会发生mousedown单击任意一个鼠标按钮时发生mouseout鼠标指针位于某个元素上，且将要移出元素的边界时发生mouseover鼠标指针移出某个元素，到另一个元素上时发生mouseup松开任意一个鼠标按钮时发生mousemove鼠标在某个元素上时持续发生

示例：

鼠标事件 var p1 = document.getElementsByTagName("p")[0]; var t = document.getElementById("text"); function f(){ var eve = event || window.event; t.value = eve.type; } p1.onmouseover = f;//注册鼠标经过时事件处理函数 p1.onmouseout = f;//注册鼠标移开时事件处理函数 p1.onmousedown = f;//注册鼠标按下时事件处理函数 p1.onmouseup = f;//注册鼠标松开时事件处理函数 p1.onmousemove = f;//注册鼠标移动时事件处理函数 p1.onclick = f;//注册鼠标单击时事件处理函数 p1.ondblclick = f;//注册鼠标双击时事件处理函数

在这里插入图片描述

鼠标点击

鼠标点击事件包括4个：click（单击）、dblclick（双击）、mousedown（按下）和mouseup（松开）。其中click事件比较常用。当这些事件处理函数返回值为false时，会禁止绑定对象的默认行为。

示例：取消超链接被单击时的跳转行为

百度 var a = document.getElementsByTagName("a"); for(var i = 0; i return false; } } 鼠标移动

mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

示例：页面元素拖放

//初始化拖放对象 var box = document.getElementById("box"); box.style.position = "absolute"; //绝对定位 box.style.width = "160px"; //宽度160像素 box.style.height = "120px"; //高度120像素 box.style.backgroundColor = "red"; //红色 //初始化变量，标准化事件对象 var mx, my, ox, oy; function e(event){ if(!event){ event = window.event; event.target = event.srcElement; event.layerX = event.offsetX; event.layerY = event.offsetY; } //计算鼠标指针的x轴距离 event.mx = event.pageX || event.clientX + document.body.scrollLeft; //计算鼠标指针的y轴距离 event.my = event.pageY || event.clientY + document.body.scrollTop; return event; } //定义鼠标事件处理函数 document.onmousedown = function(event){ event = e(event);//获取标准事件对象 o = event.target; ox = parseInt(o.offsetLeft); //拖放元素的x轴坐标 oy = parseInt(o.offsetTop); //拖放元素的y轴坐标 mx = event.mx; //按下鼠标指针的x轴坐标 my = event.my; //按下鼠标指针的y轴坐标 document.onmousemove = move; document.onmouseup = stop; } function move(event){ event = e(event); o.style.left = ox + event.mx - mx + "px"; //定义拖动元素的x轴距离 o.style.top = oy + event.my - my + "px"; //定义拖动元素的y轴距离 } function stop(event){ event = e(event); ox = parseInt(o.offsetLeft); //记录拖放元素的x轴坐标 oy = parseInt(o.offsetTop); //记录拖放元素的y轴坐标 mx = event.mx; //记录鼠标指针的x轴坐标 my = event.my; //记录鼠标指针的y轴坐标 o = document.onmousemove = document.onmouseup = null; //释放对象 }

在这里插入图片描述

鼠标经过

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件；而当把鼠标指针移出某个元素时，将触发mouseout事件。如果从父元素中移到了子元素中时，也会触发父元素的mouseover事件类型。

示例：分别为3个嵌套的div元素定义了mouseover和mouseout事件处理函数，当从外层的父元素中移动内部的子元素中，将会触发父元素的mouseover事件类型，但是不会触发mouseout事件类型。

盒子 var div = document.getElementsByTagName("div"); for(var i = 0; i this.style.border = "solid blue"; } div[i].onmouseout = function(){ this.style.border = "solid red"; } } 鼠标来源

当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果在IE事件模型中实现相同的目标，可以使用srcElement属性。

示例：当鼠标移过页面中的div时，会弹出提示对话框，提示当前元素的节点名称

div元素 var div = document.getElementsByTagName("div")[0]; div.onmouseover = function(e){ var e = e || window.event; var o = e.target || e.srcElement; alert(o.tagName); }

另外，在DOM事件模型中，还定义了currentTarget属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值与target属性值不同。因此，一般在事件处理函数中，应该使用该属性而不是this关键词获取当前对象。

示例：当鼠标移动到div元素上时，会弹出“BODY”字符提示信息，说明鼠标指针是从body元素过来的；而移开鼠标指针时，又弹出“BODY“字符提示信息，说明离开元素将要移到的元素。

div元素段落 var div = document.getElementsByTagName("div")[0]; div.onmouseover = function(){ var e = e || window .event; var o = e.relatedTarget || e.fromElement;//标准化事件属性 alert(o.tagName); } div.onmouseout = function(){ var e = e || window .event; var o = e.relatedTarget || e.toElement;//标准化事件属性 alert(o.tagName); }

在这里插入图片描述

【本文地址】

公司简介

联系我们