JavaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例
更新時間：2016年08月03日 08:46:19 投稿：jingxian
下面小編就為大家?guī)硪黄狫avaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
JavaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例
document.oncontextmenu = function(){return false}; //禁止鼠標(biāo)右鍵菜單顯示
var res = document.getElementById('box'); //找到id為box的div
document.body.onmouseup = function(e){ //在body里點擊觸發(fā)事件
if(e.button===2){ //如果button=1（鼠標(biāo)左鍵），button=2（鼠標(biāo)右鍵），button=0（鼠標(biāo)中間鍵）
console.log(e); //將傳進去的參數(shù)打印出來
console.log(e.offsetY); //打印出鼠標(biāo)點擊的Y軸坐標(biāo)
console.log(e.offsetX); //打印出鼠標(biāo)點擊的X軸坐標(biāo)
res.style.top = e.offsetY+'px'; //鼠標(biāo)點擊時給div定位Y軸
res.style.left = e.offsetX+'px'; //鼠標(biāo)點擊時給div定位X軸
res.style.display = 'block'; //顯示div盒子
}else{
res.style.display = 'none'; //否則不顯示div盒子
}
}
以上這篇JavaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS中appendChild追加子節(jié)點無效的解決方法
這篇文章主要給大家介紹了關(guān)于JS中appendChild追加子節(jié)點無效的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2018-10-10
JavaScript 開發(fā)規(guī)范要求(圖文并茂)
作為一名開發(fā)人員（WEB前端JavaScript開發(fā)），不規(guī)范的開發(fā)不僅使日后代碼維護變的困難，同時也不利于團隊的合作，通常還會帶來代碼安全以及執(zhí)行效率上的問題。2010-06-06
JS實現(xiàn)集合的交集、補集、差集、去重運算示例【ES5與ES6寫法】
這篇文章主要介紹了JS實現(xiàn)集合的交集、補集、差集、去重運算,結(jié)合實例形式分析了ES5與ES6語法環(huán)境下的集合常見運算操作技巧,需要的朋友可以參考下2019-02-02
一分鐘理解js閉包，關(guān)于js閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是js閉包，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JS對象屬性的檢測與獲取操作,結(jié)合實例形式分析了JS針對ES5、ES6實現(xiàn)對象屬性的檢測與獲取常見操作技巧,需要的朋友可以參考下2020-03-03
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細信息,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了使用cypress編寫第一個測試用例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
本文主要介紹了JS電梯導(dǎo)航的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本文主要分享了js實現(xiàn)PC固定寬高滑動輪播圖效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)彈球游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09