Предоставление нескольким элементам одного и того же идентификатора
у меня есть таблица с 90 кнопками, у которых разные идентификаторы, и я хочу оставить их такими, у меня тоже есть кнопки вне стола.
<button type = "button" onclick = "resetState()">reset state</button>
<div>
<table>
<tr>
<td><button type = "button" onclick = "step('1,1')" id = "1,1"></button></td>
<td><button type = "button" onclick = "step('1,2')" id = "1,2"></button></td>
<td><button type = "button" onclick = "step('1,3')" id = "1,3"></button></td>
<!-- etc -->
<!-- etc -->
<td><button type = "button" onclick = "step('9,7')" id = "9,7"></button></td>
<td><button type = "button" onclick = "step('9,8')" id = "9,8"></button></td>
<td><button type = "button" onclick = "step('9,9')" id = "9,9"></button></td>
</tr>
</div>
Я хочу получить доступ ко всем из них из функции, когда я нажимаю правой кнопкой мыши на одну из 90 кнопок, я хочу, чтобы произошло что-то конкретное
<script>
document.getElementById('1,1').addEventListener('contextmenu', (event) => {
event.preventDefault()
console.info("6");
})
</script>
проблема в том, что я не могу найти что-то общее между ними, кроме тэга, но, очевидно, есть и другие кнопки, поэтому я не могу их использовать, я хочу дать таблице или div что-то, что определяет все кнопки внутри него, также переходя их и присвоить им один и тот же класс нереально, разве это не так? заранее спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Добавьте прослушиватель кликов в <tr>. Если слушатель видит, что кнопка является целью, проверьте ее идентификатор.
<div>
<table class = "button-table">
<tr>
document.querySelector('.button-table tr').addEventListener('contextmenu', (e) => {
if (!e.target.matches('button')) return;
event.preventDefault()
console.info(e.target.id);
});
i want to give the table or the div something that defines all the buttons inside it, also going over them and giving them the same class is unrealistic, unless it is?
Было бы неплохо, если бы вы создавали все эти элементы с помощью механизма шаблонов (который я бы рекомендовал, если это возможно) — вводить их все вручную утомительно и подвержено ошибкам.
Вы также можете удалить все встроенные обработчики кликов, если хотите. (Они ужасная практика.)
document.querySelector('.button-table tr').addEventListener('contextmenu', (e) => {
if (!e.target.matches('button')) return;
event.preventDefault()
step(...e.target.id.split(',').map(Number));
});
Это означает, что остальная часть функции будет выполняться только в том случае, если выбранный элемент является кнопкой.
CP говорит о делегация мероприятия. Вместо того, чтобы прикрепить прослушиватели к все кнопки, прикрепите один прослушиватель к родителю, который перехватывает событие из элементов, по которым щелкнули, когда они всплывают в DOM. Но поскольку все дочерние элементы этого родителя кликабельны, вам нужно убедиться, что элемент является кнопкой, прежде чем продолжить. @МохаммадАбуКауд.
Спасибо, CP, Также для записи я изменил параметр querySelector на «.button-table», так как у меня есть несколько «tr» внутри таблицы, и поместил e.target.id в переменную, потому что по какой-то причине он будет передавать только первый символ в javaScript функцию, и это исправило ее, также спасибо, Энди, что очень прояснил
Традиционно вы бы дали им всем один и тот же класс, а затем использовали бы что-то вроде document.getElementsByClassName() для их перебора.
jQuery делает это еще проще, если вы хотите пойти по этому пути.
не могли бы вы объяснить, что именно делает эта строка
if (!e.target.matches('button')) return