位置: IT常识 - 正文
JS中的鼠标事件(js鼠标键盘事件)
编辑：rootadmin目录
前言
一、鼠标事件属性
2. MouseEvent.clientX，MouseEvent.clientY
3. MouseEvent.offsetX，MouseEvent.offsetY
4. MouseEvent.pageX，MouseEvent.pageY
二、案例
1.案例一
2. 案例二
总结
前言推荐整理分享JS中的鼠标事件(js鼠标键盘事件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js的鼠标点击事件,js操作鼠标,js中的鼠标事件有哪些,js中的鼠标事件有哪些,js的鼠标事件改变盒子宽度,js中的鼠标事件有哪些,js中的鼠标事件有哪些,js中的鼠标事件有哪些,内容如对您有帮助，希望把文章链接给更多的朋友！
通过鼠标触发事件，类似用户的行为：
属性描述onclick当单击鼠标时运行脚本。onmousedown当按下鼠标按钮时运行脚本。onmouseup当松开鼠标按钮时运行脚本。onmousemove当鼠标指针移动时运行脚本。onmouseover当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。onmouseout当鼠标指针移出元素时运行脚本，不可以阻止冒泡。onmouseenter当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。onmouseleave当鼠标指针移出元素时运行脚本，可以阻止冒泡。onmousewheel当转动鼠标滚轮时运行脚本。onscroll当滚动元素的滚动条时运行脚本。mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
var div = document.getElementById("div")var p = document.getElementById("p")div.onmouseover=function(){ console.log("div")}p.onmouseover=function(){ console.log("p") } //冒泡阶段div.onmouseenter=function(){ console.log("div")}p.onmouseenter=function(){ console.log("p")} //捕获阶段一、鼠标事件属性1. MouseEvent.button属性MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键
document.body.onmousedown=function(e){ e=e||window.event console.log(e.button)}2. MouseEvent.clientX，MouseEvent.clientYMouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标， MouseEvent.clientY属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标， 这两个属性都是只读属性。
document.body.onmousedown=function(e){ e=e||window.event console.log(e.clientX,e.clientY)} 3. MouseEvent.offsetX，MouseEvent.offsetYMouseEvent.offsetX属性返回鼠标位置距离事件作用对象左侧边缘的水平距离， MouseEvent.offsetY属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离， 这两个属性都是只读属性。
div.onclick=function(e){ e=e||window.event console.log(e.offsetX,e.offsetY) //鼠标事件触发时,当前鼠标位置距离目标节点左上角的距离} 4. MouseEvent.pageX，MouseEvent.pageY
MouseEvent.pageX属性返回鼠标位置距离文档左侧边缘的距离， MouseEvent.pageY属性返回鼠标位置距离文档顶部的距离。 这两个属性都是只读属性。
document.body.onclick=function(e){ e=e||window.event console.log("pageY:"+e.pageY) //距离文档顶部 console.log("clientY:"+e.clientY) //距离可视窗口顶部}二、案例1.案例一创建一个正方形div，默认颜色为黑色，当鼠标移入div，背景颜色变为红色，当鼠标移出div，背景颜色变为绿色
代码如下（示例）：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><div id="box" style="width: 100px;height: 100px;background: black;"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 --><script> var box = document.getElementById("box"); /* 当鼠标移入div，背景颜色变为红色 */ box.onmouseenter = function () { this.style.background = "red"; }; /* 当鼠标移出div，背景颜色变为绿色 */ box.onmouseleave = function () { this.style.background = "green"; };</script></body></html>2. 案例二编写一个通用的拖拽元素函数，创建两个div，进行拖拽演示，要求兼容IE8、火狐、谷歌等主流浏览器
代码如下（示例）：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><div id="box1" style="width: 100px;height: 100px;background: red;position: absolute;"></div><div id="box2" style="width: 100px;height: 100px;background: green;position: absolute;"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 --><script> var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); drag(box1); drag(box2); /* * 提取一个专门用来设置拖拽的函数 * 参数：开启拖拽的元素 */ function drag(obj) { //当鼠标在被拖拽元素上按下时，开始拖拽 obj.onmousedown = function (event) { // 解决事件的兼容性问题 event = event || window.event; // 设置obj捕获所有鼠标按下的事件 /** * setCapture()： * 只有IE支持，但是在火狐中调用时不会报错， * 而如果使用chrome调用，它也会报错 */ obj.setCapture && obj.setCapture(); // obj的偏移量 鼠标.clentX - 元素.offsetLeft // obj的偏移量 鼠标.clentY - 元素.offsetTop var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; // 为document绑定一个鼠标移动事件 document.onmousemove = function (event) { // 解决事件的兼容性问题 event = event || window.event; // 当鼠标移动时被拖拽元素跟随鼠标移动 // 获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; // 修改obj的位置 obj.style.left = left + "px"; obj.style.top = top + "px"; }; // 为document绑定一个鼠标松开事件 document.onmouseup = function () { // 取消document的onmousemove事件 document.onmousemove = null; // 取消document的onmouseup事件 document.onmouseup = null; // 当鼠标松开时，取消对事件的捕获 obj.releaseCapture && obj.releaseCapture(); }; /* * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， * 如果不希望发生这个行为，则可以通过return false来取消默认行为， * 但是这招对IE8不起作用 */ return false; }; }</script></body></html>总结假如我们正监视一个容器上的鼠标事件，而容器中添加了一些组件，则当在组件上进行单击鼠标、移动鼠标等操纵时，容器将不知道这些操纵的发生。
可以使用鼠标事件的转移将一个事件源发生的鼠标事件转移到另一个事件源上，也就是说，当用户的在某个事件源上单击鼠标时，可以通过鼠标事件的转移导致另一个事件源上发生鼠标事件(声东击西)。使用javax.swing包中的SwingUtilities类的静态方法：
MouseEvent convertMouseEvent(Component source，MouseEvent sourceEvent，Component destination)
可以将source组件上发生的鼠标事件转移到组件destination，该方法返回转移后的鼠标事件。 在下面的例子mouse6.java中，用户单击一个按钮，然后拖动鼠标移动按钮的位置，观察鼠标事件的转移。
以上就是今天要讲的内容，本文仅仅简单介绍了JS中的鼠标事件。
上一篇：Nginx 调整文件上传大小限制(nginx配置文件格式)
下一篇：Pytorch 2.0来了！来看看新特性怎么应用到自己的代码里(pytorch1.9.0)
