Как сделать так, чтобы JS позаботился о нескольких событиях для div

Question

Я рисую бланк о том, как обрабатывать события в Javascript, и хочу избежать использования модульной функции, которая имеет «onclick» в теге html. По сути, я хочу написать функцию, которая будет щелкать по разделу страницы, содержащему этот элемент, по щелчку, но я рисую пробел о том, как это сделать.

У меня есть модульная функция, подобная этой:

var elmnt = $("#links").on("click", function() {
    elmnt.scrollIntoView;
    console.log;
});

Теперь я передаю аргумент тегу href, но как мне сделать, чтобы JS посмотрел на эти события и выделил их? Я пишу функцию для каждой ссылки нажал? Есть ли лучший способ сделать это? Заранее спасибо.

Answer 1

Идея состоит не в том, чтобы JS «выполнял поиск событий», а в том, чтобы связать кнопки и места назначения, используя цикл в скрипте инициализации. Тогда все, что вам нужно сделать, это определить цель кнопки с атрибутом, а JS автоматически позаботится об остальном.

Следовательно, вы можете сделать scrollIntoView() глобальной функциейи пусть он принимает элемент, который вы хотите прокрутить, в качестве параметра, например:

function scrollIntoView(target) {
  // Scroll code here
}

Пример кода прокрутки см. здесь и здесь

Редактировать: что-то здесь указывало на то, что scrollIntoView () на самом деле поддерживается изначально, поэтому вам больше не нужно писать свою собственную функцию.

Скажем, у вас есть 3 кнопки и 3 назначения в вашей DOM(Я буду использовать button вместо a для ясности):

<button class="button_type_a" type="button">Scroll to destination A</button>
<button class="button_type_a" type="button">Scroll to destination B</button>
<button class="button_type_k" type="button">Scroll to destination C</button>

...

<div id="dest_A">Destination A</div>
<div id="dest_B">Destination B</div>
<div id="dest_C">Destination C</div>

Сначала подготовьте кнопки:

1. Добавьте произвольный класс (goto_button)для обозначения предполагаемого действия кнопки
2. Добавьте произвольный атрибут (target), чтобы указать их соответствующие пункты назначения

Примерно так:

<button class="button_type_a goto_button" type="button" target="dest_A">Scroll to destination A</button>
<button class="button_type_a goto_button" type="button" target="dest_B">Scroll to destination B</button>
<button class="button_type_k goto_button" type="button" target="dest_C">Scroll to destination C</button>

в котором значение target является id адресатаn.

Затем в JS сначала найдите все свои кнопки:

var gotoButtons = document.getElementsByClassName("goto_button");

Затем выполните цикл по вашим кнопкам, и для каждого поиска и привязки к их месту назначения:

for (let btn of gotoButtons) {
  let target = btn.getAttribute("target");
  let destination = document.getElementById(target);
  btn.addEventListener("click", () => {
    destination.scrollIntoView();
  });
}

Загрузите этот JS в качестве сценария инициализации для своей страницы, и все должно быть готово.

Answer 2

Ниже приведено несколько исправлений:

1) scrollIntoView - функция

2) обработчик обратного вызова click должен иметь ссылку на элемент

Проверьте код ниже.

var elmnt = $("#links").on("click", function(ele) {
    ele.scrollIntoView();
    //console.log;
});