Question

下面我为此问题编写了一个简化的上下文菜单。上下文菜单通过确定鼠标的位置，然后将其设置为菜单的左侧和顶部来工作。这就是问题，因为它是多个可右键单击对象的一个上下文菜单，如何使上下文菜单中的链接动态化。它们应根据是否单击链接1,2或3进行更改。

HTML

<body oncontextmenu="return false">
<div class="menuActive">
    <div>
        <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a>
    </div>
    <div style="display:none;" id="contextMenu">
        <a href="/task/4">Task 1: This link should be a dynamic based on click</a>
        <a href="/task/5">Task 2: This link should be a dynamic based on click</a>
    </div>
</div>

的JavaScript

function ShowMenu(control, e) {
      var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
      var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
      document.getElementById(control).style.position = 'absolute';
      document.getElementById(control).style.display = 'inline';
      document.getElementById(control).style.left = posx;
      document.getElementById(control).style.top = posy;           
}

CSS

a {
    display: block;
    height: 20px;
    background-color: #fff;
    padding: 10px;
  }

作为一个例子，我如何（使用普通的javascript）使两个链接'task / 4 /'和'/ task / 5 /'读'task / 4/3 /'和'/ task / 5/3' '点击链接3时？

PS：链接1,2和3是动态的，因此/ task / 4和/ task / 5也应该是动态的。

任何和所有帮助将不胜感激

Answer 1

function ShowMenu(control, e) {
      var newRef = e.toElement.href.slice(-1);
      var items = document.getElementById("contextMenu").children;
      for(var i=0; i<items.length;i++){
         if(items[i].tagName == "A"){
           items[i].href = "/task/" + newRef;
         }
      }
       
      console.log(items);    
  
      var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
      var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
      document.getElementById(control).style.position = 'absolute';
      document.getElementById(control).style.display = 'inline';
      document.getElementById(control).style.left = posx;
      document.getElementById(control).style.top = posy;           
}

a {
    display: block;
    height: 20px;
    background-color: #fff;
    padding: 10px;
  }

<body oncontextmenu="return false">
<div class="menuActive">
    <div>
        <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a>
    </div>
    <div style="display:none;" id="contextMenu">
        <a href="/task/4">Task 1: This link should be a dynamic based on click</a>
        <a href="/task/5">Task 2: This link should be a dynamic based on click</a>
    </div>
</div>

如何通过javascript动态更改链接？

1 个答案: