当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js中鼠标事件大全

js中鼠标事件大全

2020年07月14日  | 移动技术网IT编程  | 我要评论

##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 <0){//向下滚动
        
    }else{//向上滚动
        
    }
}

//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<0){//向下滚动
        console.log('向下滚动');
    }else{//向上滚动
        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
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
距离屏幕的水平和垂直距离
鼠标滚轮事件
滚轮事件在火狐浏览器中是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("向上滚动")
                }
            }
        }
        
document.body.onmousewheel=wheelEvent                           
document.body.addEventListener("mousewheel",wheelEvent)         //非火狐
document.body.addEventListener("DOMMouseScroll",wheelEvent)     //火狐
]

本文地址：https://blog.csdn.net/weixin_46381471/article/details/107310549

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网