0

У меня есть кнопка (.show-more), при нажатии на которую показываются/скрываются строки таблицы.

document.querySelector('#tchests tr.show-more').onclick = function() {
    // Много кода, отвечающего за показ/скрытие строк таблицы
}

Если на эту кнопку быстро нажать два раза, то возникают глюки, которые описывать я здесь не буду, т.к. вопрос не в этом. Вопрос заключается в том, как запретить делать двойной клик по кнопке? Я попробовал остановить выполнение кода onclick путём вставки в функцию события ondblclick с return: false, но это не помогло:

document.querySelector('#tchests tr.show-more').onclick = function() {
    this.ondblclick = function() { return false; }
    // Много кода, отвечающего за показ/скрытие строк таблицы
}
2
  • Это всё та же таблица из прошлого вопроса?
    – UModeL
    2 фев 2021 в 2:33
  • Почти. Реальная таблица более сложная. Если хотите, можете попробовать написать решение на примере моей таблицы из прошлого вопроса. Но, вообще, мой текущий вопрос не столько о таблицах, сколько о предотвращении тех глюков моего когда, которые будут, если пользователь осуществит двойной клик. Итого: я просто хочу, чтобы при двойном клике ничего не происходило. 2 фев 2021 в 4:42

1 ответ 1

2

document.querySelector('button').addEventListener( 'click', clickHandler );

function clickHandler(){
  if( clickHandler.cantClick ) return;
  clickHandler.cantClick = true;
  
  doSomething();
  
  setTimeout(()=>{
    clickHandler.cantClick = false;
  }, 500 ); // разница времени второго клика
}

function doSomething(){
  console.log('clicked');
}
<button>Нажми меня</button>

7
  • А, не подскажете, существуют ли более красивое решения? И можно ли как-то тело функции вставить сразу после document.querySelector('button').addEventListener('click', function() {... Вообще, я знаю, что можно. Просто не знаю, что тогда использовать вместо clickHandler . 2 фев 2021 в 8:28
  • @МихаилТестов анонимную функцию можно назвать. Просто после слова function пишите её название перед скобкой. А насчёт красивости - думаю код должен быть верным и читабельным, а красота у каждого своя.
    – user347472
    2 фев 2021 в 8:35
  • Т.е. вот так? document.querySelector('#tchests tr.show-more').addEventListener('click', function eve() { if(eve.cantClick) return; eve.cantClick = true; ...код... setTimeout(function() { eve.cantClick = false; }, 500 ); Хочу также обратить ваше внимание, что при первом клике eve.cantClick === undefined. Это соответствует канонам? Просто я перфекционист.. 2 фев 2021 в 9:25
  • @МихаилТестов да. Насчёт undefined - всё с этим в порядке, ничего предпринимать дополнительно не нужно.
    – user347472
    2 фев 2021 в 9:31
  • Как думаете, а может мне заменить document.querySelector('#button').addEventListener('click', function eve() { }); на document.querySelector('#button').onclick = function eve() { }; ? 2 фев 2021 в 10:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.