JavaScript滑鼠事件,點選滑鼠右鍵,彈出div
阿新 • • 發佈:2018-12-11
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盒子 } }