JavaScript获取鼠标在指定区域内的位置方法汇总

方法一：使用mousemove事件获取

window.onload=function(){
    document.onmousemove=function(ev){
        //获取鼠标在页面中的坐标
        var oEvent=ev||event;
        var iLeft=oEvent.clientX;
        var iTop=oEvent.clientY;

        //获取鼠标在指定区域内的坐标
        var oBox=document.getElementById('box');
        var l=oBox.offsetLeft;
        var t=oBox.offsetTop;
        var w=oBox.offsetWidth;
        var h=oBox.offsetHeight;

        var iX=iLeft-l;
        var iY=iTop-t;

        if(iX>0 && iX<w &&="" iy="">0 && iY<h){ <="" code="" console.log('鼠标在盒子内的坐标：('+ix+','+iy+')');="" }="" };="" 鼠标在指定区域内=""></h){></w>

方法二：使用mouseenter和mouseleave事件获取

window.onload=function(){
    var oBox=document.getElementById('box');
    oBox.onmouseenter=function(ev){
        var oEvent=ev||event;
        var iLeft=oEvent.clientX;
        var iTop=oEvent.clientY;

        //获取鼠标在指定区域内的坐标
        var l=oBox.offsetLeft;
        var t=oBox.offsetTop;
        var w=oBox.offsetWidth;
        var h=oBox.offsetHeight;

        var iX=iLeft-l;
        var iY=iTop-t;

        console.log('鼠标进入盒子时的坐标：('+iX+','+iY+')');

    };
    oBox.onmouseleave=function(ev){
        var oEvent=ev||event;
        var iLeft=oEvent.clientX;
        var iTop=oEvent.clientY;

        //获取鼠标在指定区域内的坐标
        var l=oBox.offsetLeft;
        var t=oBox.offsetTop;
        var w=oBox.offsetWidth;
        var h=oBox.offsetHeight;

        var iX=iLeft-l;
        var iY=iTop-t;

        console.log('鼠标离开盒子时的坐标：('+iX+','+iY+')');

    };
};