Как различить несколько программных кликов в JavaScript?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по JavaScript. Я пытаюсь сделать так, чтобы один обработчик клика мог различать, откуда он был вызван программно. Вот пример кода:

let option = 'A';

switch (option) {
  case 'A':
    document.getElementById('кнопка').click();
    break;
  case 'B':
    document.getElementById('кнопка').click();
    break;
}

function обработчикКлика(событие) {
  // Как узнать, был ли клик из case A или B?
}

Я слышал, что можно как-то отличить реальный клик от программного, но не могу найти информацию, как различить несколько программных кликов между собой. Есть ли способ передать какое-то значение в функцию-обработчик, чтобы понять, откуда был вызван клик? Хотелось бы решение на чистом JavaScript, без использования библиотек. Буду благодарен за любые идеи!

2

Классная задача! А что если использовать объект с методами для каждого варианта? Типа:

const actions = {
A: () => обработчикКлика(‘A’),
B: () => обработчикКлика(‘B’)
};

actionsoption;

function обработчикКлика(источник) {
console.log(‘Клик из:’, источник);
}

Так код будет более гибким, легко добавлять новые варианты. И никаких лишних слушателей событий.

3

Можно добавить кастомные данные к событию клика. Примерно так:

let e = new MouseEvent('click');
e.myCustomData = 'A'; // или 'B'
document.getElementById('кнопка').dispatchEvent(e);

function обработчикКлика(событие) {
  console.log(событие.myCustomData);
}

Так ты сможешь различать источник программного клика. Еще вариант - использовать замыкания или передавать параметры через bind(). Главное не забыть про обработку реальных кликов пользователя.

4

на самом деле есть простой способ решить эту задачу без лишних сложностей. можно просто добавить параметр в функцию обработчика и передавать его при вызове. например так:

function обработчикКлика(событие, источник) {
console.log(‘клик из:’, источник);
}

document.getElementById(‘кнопка’).addEventListener(‘click’, (e) => обработчикКлика(e, ‘пользователь’));

switch (option) {
case ‘A’:
обработчикКлика(null, ‘A’);
break;
case ‘B’:
обработчикКлика(null, ‘B’);
break;
}

так ты сможешь легко понять откуда пришел клик. и код получится намного проще и понятнее