js中鼠标事件大全

2023-11-15 07:48| 来源: 网络整理| 查看: 265

##js中鼠标事件大全

click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover：移入事件。 mouseout：移出事件。 mouseenter：移入事件。 mouseleave：移出事件。 contextmenu：右键事件。 onmousewheel：滚轮事件。

//js中，onmousewheel：滚轮事件兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120” delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理 } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3” delta = -event.detail/3; } if (delta) handle(delta); } //上下滚动时的具体处理函数 function handle(delta) { if (delta //向上滚动 } } //jQuery中onmousewheel：滚轮事件兼容性写法 $(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e){ e.preventDefault(); var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail; var delta = Math.max(-1, Math.min(1, wheel) ); if(delta//向上滚动 console.log('向上滚动'); } }

IE、chrome监听的是wheelDelta,向下滚动其值为-120；向上滚动其值为120 FF监听的是detail,向下滚动其值为3；向上滚动其值为-3 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") } //捕获阶段

鼠标事件属性 MouseEvent.altKey MouseEvent.ctrlKey MouseEventaKey MouseEvent.shiftKey 分别代表鼠标事件发生时，是否按下了对应的键盘按键。返回值为布尔值。

document.body.onclick=function(e){ e=e||window.event console.log("altKey:"+e.altKey); //是否按下alt键 console.log("ctrlKey:"+e.ctrlKey); //是否按下Ctrl键 console.log("metaKey:"+e.metaKey); //是否按下meta键 console.log("shiftKey:"+e.shiftKey); //是否按下shift键 }

MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键

document.body.onmousedown=function(e){ e=e||window.event console.log(e.button) }

MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标， MouseEvent.clientY属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标，这两个属性都是只读属性。

document.body.onmousedown=function(e){ e=e||window.event console.log(e.clientX,e.clientY) }

MouseEvent.offsetX，MouseEvent.offsetY MouseEvent.offsetX属性返回鼠标位置距离事件作用对象左侧边缘的水平距离， MouseEvent.offsetY属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，这两个属性都是只读属性。

div.onclick=function(e){ e=e||window.event console.log(e.offsetX,e.offsetY) //鼠标事件触发时,当前鼠标位置距离目标节点左上角的距离 }

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) //距离可视窗口顶部 }

MouseEvent.movementX，MouseEvent.movementY(了解) MouseEvent.movementX属性返回上一个mousemove事件与当前mousemove事件间的水平位移， MouseEvent.movementY属性返回上一个mousemove事件与当前mousemove事件的垂直距离。这两个属性都是只读属性。 e.screenX,e,screenY 距离屏幕的水平和垂直距离鼠标滚轮事件滚轮事件在火狐浏览器中是DOMMouseScroll，而在其他浏览器中是onmousewheel。向上下滚就保存到e.detail里面火狐：e.detail 滴太哦向上滚动返回值为大于0 向下滚动返回值为小于0 非火狐：e.wheelDelta 带哦特向上滚动返回值为小于0 向下滚动返回值为大于0

function wheelEvent(e){ e=e||window.event if(e.detail){ //判断是否支持e.detail 支持的话说明是火狐 if(e.detail console.log("向下滚动") } }else{ //不支持,说明是其他浏览器 if(e.wheelDelta console.log("向上滚动") } } } document.body.onmousewheel=wheelEvent document.body.addEventListener("mousewheel",wheelEvent) //非火狐 document.body.addEventListener("DOMMouseScroll",wheelEvent) //火狐 ]

【本文地址】

公司简介

联系我们