Javascript _ javascript tips for calling context menus

This article mainly introduces examples of js context menu calling, which has a certain reference value. Interested friends can refer to the examples in this article to describe the example code of js context menu calling, we will share this with you for your reference. The details are as follows:

Principle
A contextmenu event is triggered when you right-click it. By default, the default context menu of the browser is triggered. By manually blocking this default action, the custom context menu is displayed, hide this menu when you click it.
Code
1. html

 
   
  
 
 
 
 
  
  
  
Button 1
  
  
  
Button 2
  
  
  
Button 3
 
 
 

2. js

// Add the contextmenu event var right = document. getElementById ("right"); EventUtil. addEventListener (right, "contextmenu", function (event) {event = EventUtil. getEvent (event); EventUtil. preventDefault (event); var menu = document. getElementById ("menu"); // obtain the coordinates when you right-click the mouse, and set the context menu Position page = EventUtil. getPagePosition (event); menu. style. left = page. pageX + "px"; menu. style. top = page. pageY + "px"; menu. style. visibility = "visible" ;}); // Add EventUtil to hide the context menu event. addEventListener (document, "click", function (event) {var menu = document. getElementById ("menu"); menu. style. visibility = "hidden ";});

The EventUtil code appears in this article:How to Use js cross-browser Event Listeners and event objects

The above is all the content in this article. We will teach you how to call the context menu in js and hope to help you learn it.