JavaScript to achieve the effect of clicking on the self-made menu

JavaScript to achieve the effect of clicking on the self-made menu

This article shares the specific code of JavaScript to achieve the effect of clicking on the self-made menu for your reference. The specific content is as follows

Application scenario: When we want users to not see the default browser menu pop up when they right-click, we need to prevent the browser from doing the default behavior and execute the desired effect.

The first way is to create elements

<!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>

The second method : by hiding elements

<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>

When we right-click, the default menu will not pop up, and the red box I set will pop up.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js drop-down menu clicks next to collapse implementation (pitfall record)
  • js realizes the effect of displaying the current content by clicking on the secondary menu
  • JS implements an example of clicking the drop-down menu to synchronize the selected content to the input box
  • Simply implement js click to expand the secondary menu function
  • js implements the sliding menu effect code by clicking the upper left corner of the mouse
  • js implements the drop-down menu effect code that expands when clicking downward
  • CSS+JS method to realize the method of automatically closing the DIV layer menu by clicking the text pop-up
  • A simple example of showing or hiding the effect of js menu click
  • Js click pop-up drop-down menu effect example
  • Click the drop-down menu to implement the js code for the connection jump function

<<:  Automatic backup of MySQL database using shell script

>>:  Two ways to completely delete users under Linux

Recommend

How to write the style of CSS3 Tianzi grid list

In many projects, it is necessary to implement th...

Analysis of the principle and usage of MySQL continuous aggregation

This article uses examples to illustrate the prin...

Example code for using @media in CSS3 to achieve web page adaptation

Nowadays, the screen resolution of computer monit...

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Docker installation (Alibaba Cloud Server) Docker...

Vue+axios sample code for uploading pictures and recognizing faces

Table of contents Axios Request Qs processing dat...

MySQL latest version 8.0.17 decompression version installation tutorial

Personally, I think the decompressed version is e...

Vue ElementUI implements asynchronous loading tree

This article example shares the specific code of ...

A brief analysis of how MySQL implements transaction isolation

Table of contents 1. Introduction 2. RC and RR is...

Web page text design should be like smart girls wearing clothes

<br />"There are no ugly women in the w...

Vue implements login verification code

This article example shares the specific code of ...

Solution to the problem that elements with negative z-index cannot be clicked

I was working on a pop-up ad recently. Since the d...

The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware

Table of contents 1. Download the system image fi...

Implementing user registration function with js

This article example shares the specific code of ...

How to allow remote connection in MySql

How to allow remote connection in MySql To achiev...

22 Vue optimization tips (project practical)

Table of contents Code Optimization Using key in ...