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