Question

我正在编写一个简单的HTML页面，它是表格中的按钮列表，每个按钮都是指向网站的链接。我想要的是，当您左键单击一个按钮时，它会在同一窗口中打开链接，当您右键单击它时，链接将在新窗口中打开。

我已经完成了以下工作。虽然它确实有效，但我正在尝试清理代码，因为这看起来可以更有效地完成，尽管我不确定如何。现在我必须手动将“onContextMenu”传递给每个按钮，并将URL写出两次。

有没有办法优化这个或清理代码以使其更具可读性和可维护性？

<script>
  function RightClickFunction(url) {
    //alert("You've tried to open context menu");
    window.open(url);
    return false;
  }
</script>

  ...
  ...

      <tr>
        <td><form action="http://amazon.com"><input class="btn" type="submit" value="Amazon" onContextMenu="return RightClickFunction('http://amazon.com');"></form></td>
        <td><form action="http://newegg.com"><input class="btn" type="submit" value="Newegg" onContextMenu="return RightClickFunction('http://newegg.com');"></form></td>
      </tr>

编辑：

以下是一个解决方案的进展情况。

<html>
  <head>
    <script>
        var elems = document.querySelectorAll('input.btn');
        console.log(elems);
        for (var i = 0; i < elems.length; i++) {
          console.log(elems[i]);
          elems[i].oncontextmenu = function(e) {
            return RightClickFunction(this.parentNode.getAttribute('action'));     
            }
          }
          function RightClickFunction(url) {
            alert("You've tried to open context menu: " + url);
            return false;
          }
    </script>
  </head>
  <body>
    <table>
        <tr>
          <td><form action="http://amazon.com"><input class="btn" type="submit" value="Amazon"/></form></td>
          <td><form action="http://newegg.com"><input class="btn" type="submit" value="Newegg"/></form></td>
        </tr>
    </table>
  </body>
</html>

Answer 1

当然，您可以选择所有输入，遍历它们并为每个输入添加事件监听器。

var elems = document.querySelectorAll('input.btn');
for (var i = 0; i < elems.length; i++) {
    elems[i].oncontextmenu = RightClickFunction;
}

在此处查看此操作（请注意，我使用form操作属性（this.parentNode.getAttribute('action')）将URL分配给输入上下文菜单事件）：

＆＃13;

var elems = document.querySelectorAll('input.btn');
console.log(elems);
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i]);
  elems[i].oncontextmenu = function(e) {
    return RightClickFunction(this.parentNode.getAttribute('action'));     
    
    }
  }

  function RightClickFunction(url) {
    alert("You've tried to open context menu: " + url);
    //window.open(url);
    return false;
  }

＆＃13;

<tr>
<td><form action="http://amazon.com">
  <input class="btn" type="submit" value="Amazon"  />
</form></td>
<td><form action="http://newegg.com">
  <input class="btn" type="submit" value="Newegg"  />
</form></td>
</tr>

＆＃13;

Answer 2

我正在为我的项目使用jQuery库：

 $('input[type="button"').on('contextmenu',function(){
      alert('you made a rightclick');
 });

因此，您在站点的每个按钮上都有一个contextmenu函数（注意：请首先包含jQuery !!）。

有关详细信息，请参阅此处：JQuery on('contextmenu') for body, but special one class

有没有办法为HTML页面中的所有按钮设置onContextMenu属性？

2 个答案: