其他分享
首页 > 其他分享> > 鼠标事件

鼠标事件

作者:互联网

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

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
MouseEvent.metaKey
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
距离屏幕的水平和垂直距离

标签:console,log,鼠标,MouseEvent,事件,属性
来源: https://www.cnblogs.com/th2001/p/16264424.html