Context menu in web It is also called right click menu in development , stay web It is common in development . If the front-end plug-in used by the background system , such as easyui etc. , This context control comes with it , But if you want to do it yourself , How to do it ? Here I share one with you , Let's take a look at the final overall effect :

There are two problems to be solved :
How to accurately get the right mouse click position , And let the original hidden menu display in this position .
When the page height is very high , So that when the scroll bar appears on the right side of the page, make sure that the pop-up menu is in the right position .
How to solve it ?

Let's see , If you want to get the click position of the mouse , We can do this through the pageX perhaps clientX, But which of these two should I use ? because pageX It refers to the distance from the leftmost side of the document window to the mouse click position (pageY In the same way , Is the distance from the top edge of the document window to the mouse click position ), and clientX Is the distance from the far left of the visible window to the mouse click position (clientY In the same way , Is the distance from the top of the visible window to the mouse click position ). in other words pageX The value of contains the distance the scroll bar rolls out , So make sure the pop-up menu is in the right place , We're going to use it pageX and pageY.

    2. There is another point to note , For example, the pop-up menu above me is a ul,ul itself padding and margin It's not for you 0 Of , In this case , Even if you use it pageX and pageY, Up and down
When the text menu pops up, it still has a link with the position you click padding perhaps margin Deviation of , So we're going to have to ul Set in margin and padding by 0.
The following is the specific code implementation part , In order to achieve the effect of scrolling the page , I copied a lot of lines table Of tr label , So it seems that html It's a long time .
html code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Context menu </title>
</head>
<body> 
  <ul class="menu" id="menu">
          <li> delete </li>
        <li class="sep"></li>
        <li> modify </li>
        <li class="sep"></li>
        <li> View details </li>
  </ul>
  <table class="datatable">
      <tr>
        <th> date </th>
        <th> time </th>
        <th> Bank name </th>
        <th> account number </th>
        <th> Account name </th>
        <th> amount of money </th>
        <th> Country of the other party </th>
        <th> Name of transaction nature </th>
      </tr>
         <tr>
          <td>2016-6-1</td>
          <td>09:30:08</td>
          <td> Shanghai Pudong Development Bank Shanghai Branch </td>
          <td>FTN9884554100002014</td>
          <td> Entry </td>
          <td>2,199,975.00</td>
          <td> Hong Kong </td>
          <td> General trade </td>
         </tr>
             <tr>
          <td >2016-6-1</td>
          <td>09:30:08</td>
          <td> Shanghai Pudong Development Bank Shanghai Branch </td>
          <td>FTN9884554100002001</td>
          <td> Out of account </td>
          <td>14,447,235.82</td>
          <td> China </td>
          <td> goods </td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>09:28:43</td>
          <td> Shanghai Pudong Development Bank Shanghai Branch </td>
          <td>FTE9799539000001601</td>
          <td> Out of account </td>
          <td>1,528,818.94</td>
          <td> China </td>
          <td> Income from financial derivatives transactions / Expenses arising from financial derivatives transactions </td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>09:28:43</td>
          <td> Shanghai Pudong Development Bank Shanghai Branch </td>
          <td>FTE9804545000000114</td>
          <td> Out of account </td>
          <td>9,770.00</td>
          <td> Hong Kong </td>
          <td> General trade </td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td> Shanghai Electric finance company ( Shanghai )</td>
          <td>FTE3105016536000000000501</td>
          <td> Entry </td>
          <td>6,200,000.00</td>
          <td> China </td>
          <td> Internal deposit of financial company group / Down stroke </td>
         </tr>
    </table>     
</body>
</html>

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree