1. 程式人生 > >JavaScript滑鼠事件,點選滑鼠右鍵,彈出div

JavaScript滑鼠事件,點選滑鼠右鍵,彈出div

複製程式碼
document.oncontextmenu = function(){return false};     //禁止滑鼠右鍵選單顯示
     var res = document.getElementById('box');      //找到id為box的div
     document.body.onmouseup = function(e){     //在body裡點選觸發事件
        if(e.button===2){       //如果button=1(滑鼠左鍵),button=2(滑鼠右鍵),button=0(滑鼠中間鍵)
            console.log(e);     //將傳進去的引數打印出來
            console.log(e.offsetY);     //打印出滑鼠點選的Y軸座標
            console.log(e.offsetX);     //打印出滑鼠點選的X軸座標
            res.style.top = e.offsetY+'px';     //滑鼠點選時給div定位Y軸
            res.style.left = e.offsetX+'px';    //滑鼠點選時給div定位X軸
            res.style.display = 'block';        //顯示div盒子
        }else{
            res.style.display = 'none';         //否則不顯示div盒子
        }
        
     } 
複製程式碼
document.oncontextmenu = function(){return false};     //禁止滑鼠右鍵選單顯示
     var res = document.getElementById('box');      //找到id為box的div
     document.body.onmouseup = function(e){     //在body裡點選觸發事件
        if(e.button===2){       //如果button=1(滑鼠左鍵),button=2(滑鼠右鍵),button=0(滑鼠中間鍵)
            console.log(e);     //將傳進去的引數打印出來
            console.log(e.offsetY);     //打印出滑鼠點選的Y軸座標
            console.log(e.offsetX);     //打印出滑鼠點選的X軸座標
            res.style.top = e.offsetY+'px';     //滑鼠點選時給div定位Y軸
            res.style.left = e.offsetX+'px';    //滑鼠點選時給div定位X軸
            res.style.display = 'block';        //顯示div盒子
        }else{
            res.style.display = 'none';         //否則不顯示div盒子
        }
        
     }