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); //將傳進(jìn)去的參數(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)文章
![JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )](http://img.jbzj.com/images/xgimg/bcimg0.png)
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_
今天在網(wǎng)上看到一篇很有意思的文章（需翻墻），解釋了幾段非常有趣的 JavaScript 代碼。你猜下面這段 JavaScript 代碼是什么意思？2011-02-02
這篇文章主要介紹了純js實現(xiàn)web端錄音與播放功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Javascript Function對象擴展之延時執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時執(zhí)行一個函數(shù)?2010-07-07
下面小編就為大家?guī)硪黄猨s實現(xiàn)彈窗居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
微信小程序?qū)崿F(xiàn)省市區(qū)三級地址選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)省市區(qū)三級地址選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
二分查找在我們學(xué)習(xí)算法中是很重要的一部分，而且面試的時候會經(jīng)常的讓我們手寫一些算法。所以這篇文章將通過三個場景帶大家深入了解二分查找算法2023-03-03
這篇文章主要介紹了Javascript異步編程之Promise，想了解異步編程和Promise的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
echarts多條折線圖動態(tài)分層的實現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動態(tài)分層的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02