JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月03日 08:46:19 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例

document.oncontextmenu = function(){return false};   //禁止鼠標(biāo)右鍵菜單顯示
   var res = document.getElementById('box');   //找到id為box的div
   document.body.onmouseup = function(e){   //在body里點(diǎn)擊觸發(fā)事件
    if(e.button===2){    //如果button=1（鼠標(biāo)左鍵），button=2（鼠標(biāo)右鍵），button=0（鼠標(biāo)中間鍵）
      console.log(e);   //將傳進(jìn)去的參數(shù)打印出來(lái)
      console.log(e.offsetY);   //打印出鼠標(biāo)點(diǎn)擊的Y軸坐標(biāo)
      console.log(e.offsetX);   //打印出鼠標(biāo)點(diǎn)擊的X軸坐標(biāo)
      res.style.top = e.offsetY+'px';   //鼠標(biāo)點(diǎn)擊時(shí)給div定位Y軸
      res.style.left = e.offsetX+'px';  //鼠標(biāo)點(diǎn)擊時(shí)給div定位X軸
      res.style.display = 'block';    //顯示div盒子
    }else{
      res.style.display = 'none';     //否則不顯示div盒子
    }
    
   }

以上這篇JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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