Есть ли способ установить атрибут onContextMenu для всех кнопок на странице HTML?

Я пишу простую HTML-страницу, которая представляет собой список кнопок в таблице, и каждая кнопка является ссылкой на веб-сайт. Я хочу, чтобы при щелчке по кнопке она открывала ссылку в том же окне, и когда вы щелкаете правой кнопкой мыши, ссылка открывается в новом окне.Есть ли способ установить атрибут onContextMenu для всех кнопок на странице 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>

EDIT:

Здесь работа ведется в одном решении.

<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>

источник

2015-01-13 Matt

Вы знакомы с привязкой события? Это поможет вам оптимизировать и очистить код. –

Конечно, вы можете выбрать все входы, цикл через них и добавить слушатель событий для каждого из них.

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

в действии здесь (заметьте, я использую атрибут form действия (this.parentNode.getAttribute('action')), чтобы назначить URL к событиям ввода контекстного меню):

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; 
 
    }

<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>

источник

2015-01-13 16:59:30 Shomz

Спасибо за ответ, похоже, что я хочу. Я пробовал реализовать ваше решение (см. Новые изменения), но я не вижу его работы. Меню правого щелчка - это стандартное меню ОС. Вы видите, что я могу делать неправильно? (Это Windows 7 и Firefox) – Matt

Добро пожаловать. Вы видите какие-либо ошибки в консоли? Потому что исходный код отлично работает в фрагменте. – Shomz

Я вижу, что фрагмент работает, поэтому я уверен, что это то, что я делаю неправильно. В консоли Firefox я вижу «NodeList []», что, по-видимому, означает, что он не находит элементы кнопки, чтобы добавить событие, поэтому правый щелчок не работает. Есть ли способ просмотреть полный пример фрагмента, чтобы я мог сравнить его с тем, что я редактировал в исходном вопросе? Я, наверное, что-то пропустил. – Matt

Я использую библиотеку JQuery для моих проектов:

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

Так у вас есть функция Контекстное на каждой кнопке на вашем сайте (Примечание: Пожалуйста, включите JQuery первый !!).

Смотрите здесь для получения дополнительной информации: JQuery on('contextmenu') for body, but special one class

источник

2015-01-13 16:57:40 brandelizer

Не уверен, что это стоит того, чтобы использовать тяжелый jQuery для чего-то простого. – Shomz

@Shomz Вы правы. Ваше решение лучше. – brandelizer

Есть ли способ установить атрибут onContextMenu для всех кнопок на странице HTML?

ответ

Смежные вопросы