JavaScript實(shí)現(xiàn)點(diǎn)擊自制菜單效果

更新時(shí)間：2021年02月02日 08:34:04 作者：~噓~禁止想象~

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊自制菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)點(diǎn)擊自制菜單效果的具體代碼，供大家參考，具體內(nèi)容如下

應(yīng)用場景：當(dāng)我們希望用戶再點(diǎn)擊右鍵的時(shí)候不希望彈出瀏覽器的默認(rèn)菜單時(shí)，需要阻止瀏覽器默認(rèn)行為，并執(zhí)行我們想要的效果

第一種方式，通過創(chuàng)建元素的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 3000px;
    }
    
    .menu {
      width: 100px;
      height: 280px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
  </style>
</head>

<body>
  <script>
    var Bon = true;
    var menu = null;
    document.oncontextmenu = function(event) {
      if (Bon) {
        menu = document.createElement("div");
        menu.classList.add("menu");
        document.body.appendChild(menu);
        menu.style.left = event.pageX + "px";
        menu.style.top = event.pageY + "px";
        menu.style.display = "block";
        Bon = false;
        event.preventDefault();
      } else {
        menu.style.left = event.pageX + "px";
        menu.style.top = event.pageY + "px";
        event.preventDefault();
      }
    }

    document.onmousedown = function(e) {
      if (e.button == 0) {
        var menu = document.querySelector(".menu");
        document.body.removeChild(menu);
        Bon = true;
      }
    }
  </script>
</body>

</html>

第二種：通過隱藏元素的方式

<div class="menu"></div>
 <script>
    var menu = document.querySelector(".menu");
    document.oncontextmenu = function(event) {
      menu.style.left = event.pageX + "px";
      menu.style.top = event.pageY + "px";
      menu.style.display = "block";
      event.preventDefault();
    }
    document.onmousedown = function(e) {
      if (e.button == 0) {
        menu.style.display = "none";
      }
    }
</script>

當(dāng)我們點(diǎn)擊右鍵時(shí)就不會(huì)彈出默認(rèn)的菜單了，彈出了我設(shè)置的紅框框。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
js中undefined該怎么判斷淺析
可能很多朋友認(rèn)為undefined是在js中未定義變量時(shí)才會(huì)提示的錯(cuò)誤,其實(shí)不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關(guān)于js中undefined該怎么判斷的相關(guān)資料,需要的朋友可以參考下
2023-04-04
JS組件福利大放送推薦12款好用的Bootstrap組件
Bootstrap組件福利大放送，這篇文章主要為大家推薦了幾款好用的Bootstrap組件，感興趣的小伙伴們可以參考一下
2016-07-07
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片翻轉(zhuǎn)效果本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
本篇文章主要是對(duì)JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
JavaScript中奇葩的假值示例應(yīng)用
這篇文章主要介紹了JavaScript中奇葩的假值應(yīng)用,需要的朋友可以參考下
2014-03-03
webpack入門必知必會(huì)
本文主要介紹了webpack入門的一些簡單命令和基本配置信息，從代碼拆分、打包、壓縮的角度和傳統(tǒng)的前端項(xiàng)目進(jìn)行對(duì)比，希望以此加深大家對(duì)webpack基礎(chǔ)知識(shí)的印象。下面跟著小編一起來看下吧
2017-01-01
微信小程序自定義狀態(tài)欄
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義狀態(tài)欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
微信小程序開發(fā)實(shí)戰(zhàn)教程之手勢解鎖
這篇文章主要介紹了微信小程序開發(fā)實(shí)戰(zhàn)教程之手勢解鎖的相關(guān)資料,本文分步驟給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
離開當(dāng)前頁面前使用js判斷條件提示是否要離開頁面
這篇文章主要介紹了離開當(dāng)前頁面前如何使用js判斷條件提示是否要離開頁面,需要的朋友可以參考下
2014-05-05