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

Detailed explanation of mysql user variables and set statement examples

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

Detailed explanation of mysql user variables and set statement examples

Detailed explanation of nginx forward proxy and reverse proxy

Solve the problem of case sensitivity of Linux+Apache server URL

Design Reference Beautiful and Original Blog Design

HTML table tag tutorial (13): internal border style attributes RULES

Does MySql need to commit?

Summary of how to use bootstrap Table

Detailed explanation of Json format

The difference between name and value in input tag

Detailed explanation of JavaScript program loop structure

Recommend

Problems installing TensorRT in docker container

Detailed explanation of Vue's front-end system and front-end and back-end separation

Mysql 8.0 installation and password reset issues

Introduction to Enterprise Production MySQL Optimization

Detailed explanation of the function and usage of keepAlive component in Vue

Detailed explanation of the reasons and solutions for Docker failing to start normally

HTML implements the function of automatically refreshing or opening a new window for the URL link of the a element href

Several practical scenarios for implementing the replace function in MySQL

A Brief Analysis of MySQL Connections and Collections

Analyze the problem of Zabbix 5.0 disk automatic discovery and read-write monitoring

ElementUI implements the el-form form reset function button

How to quickly clean up billions of data in MySQL database

Various problems encountered in sending emails on Alibaba Cloud Centos6.X

Example of building a Jenkins service with Docker

Complete steps to use element in vue3.0