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

An article to help you understand jQuery animation

MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization

This article summarizes some common MySQL optimiz...

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

An article to help you understand jQuery animation

MySQL 5.7.18 binary package installation tutorial under Linux (without default configuration file my_default.cnf)

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

Vue implements fuzzy query-Mysql database data

vue.config.js packaging optimization configuration

jQuery realizes the picture following effect

Introduction to the functions and usage of value and name attributes in Html

Several ways to add timestamps in MySQL tables

Getting the creation time of a file under Linux and a practical tutorial

Talking about ContentType(s) from image/x-png

Recommend

Mysql: The user specified as a definer ('xxx@'%') does not exist solution

Analyzing Linux high-performance network IO and Reactor model

MySQL sharding details

Use pure CSS to disable the a tag in HTML without JavaScript

js to achieve the pop-up effect

Nginx high concurrency optimization practice

How to make spaces have the same width in IE and FF?

MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization

Comparison of the efficiency of different methods of deleting files in Linux

Detailed steps for configuring Tomcat server in IDEA 2020

A brief discussion on how to write beautiful conditional expressions in JS

How to enhance Linux and Unix server security

Common tags in XHTML

MySQL 8.0.25 installation and configuration tutorial under Linux

Summary of MySQL password modification methods