⿏标事件⼤全详解
click：单击事件。
dblclick：双击事件。
mousedown：按下⿏标键时触发。
mouseup：释放按下的⿏标键时触发。
mousemove：⿏标移动事件。
mouseover：移⼊事件。
mouseout：移出事件。
mouseenter：移⼊事件。
mouseleave：移出事件。
contextmenu：右键事件。
mouseover事件和mouseenter事件，都是⿏标进⼊⼀个节点时触发。两者的区别是，mouseenter事件只触发⼀次，⽽只要⿏标在节点内部移动，mouseover事件会在⼦节点上触发多次。
var div = ElementById("div")
var p  = ElementById("p")
console.log("div")
}
console.log("p")
}                              //冒泡阶段
console.log("div")
}
console.log("p")
}                              //捕获阶段
⿏标事件属性
MouseEvent.altKey
MouseEvent.shiftKey
分别代表⿏标事件发⽣时，是否按下了对应的键盘按键。返回值为布尔值。
lick=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代表右键
usedown=function(e){
e=e||window.event
console.log(e.button)
}
MouseEvent.clientX，MouseEvent.clientY
MouseEvent.clientX属性返回⿏标位置相对于浏览器窗⼝左上⾓的⽔平坐标，
MouseEvent.clientY属性返回⿏标位置相对于浏览器窗⼝左上⾓的垂直坐标，
这两个属性都是只读属性。
usedown=function(e){
e=e||window.event
console命令大全
console.log(e.clientX,e.clientY)
}
MouseEvent.offsetX，MouseEvent.offsetY
MouseEvent.offsetX属性返回⿏标位置距离事件作⽤对象左侧边缘的⽔平距离，
MouseEvent.offsetY属性返回⿏标位置距离事件作⽤对象左侧边缘的垂直距离，
这两个属性都是只读属性。
e=e||window.event
console.log(e.offsetX,e.offsetY)
//⿏标事件触发时，当前⿏标位置距离⽬标节点左上⾓的距离
}
MouseEvent.pageX，MouseEvent.pageY
MouseEvent.pageX属性返回⿏标位置距离⽂档左侧边缘的距离，
MouseEvent.pageY属性返回⿏标位置距离⽂档顶部的距离。
这两个属性都是只读属性。
lick=function(e){
e=e||window.event
console.log("pageY:"+e.pageY)              //距离⽂档顶部
console.log("clientY:"+e.clientY)          //距离可视窗⼝顶部
}
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<0){
console.log("向上滚动")
}else{
console.log("向下滚动")
}
}else{          //不⽀持，说明是其他浏览器
if(e.wheelDelta<0){
console.log("向下滚动")
}else{
console.log("向上滚动")
}
}
}
usewheel=wheelEvent                          document.body.addEventListener("mousewheel",wheelEvent)        //⾮⽕狐document.body.addEventListener("DOMMouseScroll",wheelEvent)    //⽕狐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。