JS запретить повторное нажатие на кнопку

12
Станислав
На сайте с 27.12.2009
Offline
237
24107

Как сделать следующее

Есть кнопочка при нажатии на которую подгружается файл, проблема в том что нажимать на её можно бесконечно и скрипт выполняется вновь и вновь

<div id="button">кнопочка</div>

Как сделать чтобы нажать на кнопку можно было только один раз?

Мы там, где рады нас видеть.
R
На сайте с 18.12.2009
Offline
92
#1

Назначьте атрибут какой нибудь на кнопку. После нажатия замените или удалите его.

А в коде javascript сделайте проверку на наличие или соответствие этого атрибута.

Также можно инициализировать переменную, которая будет меняться при клике и потом проверять ее значение.

Вариантов много на самом деле.

Я могу написать пример, если нужно.

---------- Добавлено 23.12.2012 в 16:59 ----------

http://jsfiddle.net/sakx9/1/

Станислав
На сайте с 27.12.2009
Offline
237
#2

суть понял

Значит нужно сделать так

<div id="button">кнопочка</div>

после нажатия на кнопочку нужно заменить ее id, например на id="button2"

Было бы неплохо увидеть пример

все понял, спс =)

R
На сайте с 18.12.2009
Offline
92
#3

Да вариантов реализации много. Я накидал пример на jQuery. Ссылку указал выше.

rbbumfirst
На сайте с 03.04.2009
Offline
87
#4

$('body').one('click','#buttonID',function(){

alert('Один раз нажал и хватит!');
});
Web developer (http://rudov.com). разработка на Go, ReactJS, React Native
L
На сайте с 07.12.2007
Offline
351
#5

<div id="button" onClick="this.disabled='true'">кнопочка</div>
DiAksID
На сайте с 02.08.2008
Offline
218
#6
Ladycharm:
<div id="button" onClick="this.disabled='true'">кнопочка</div>

наличие атрибута disable не запрещает другим функциям js отлавливать событие onclick ...

show must go on !!!...
LEOnidUKG
На сайте с 25.11.2006
Offline
1723
#7

ну самый прикольный вариант, это создать некую переменную:

var stopajax=0;

и в каждой функции:

function xxx()

{

if (!stopajax) {

stopajax=1;

...........

...........

...........

...........

...........

...........

}

}

не забываем её сбрасывать.

Кстати я так стопорил на одном проекте, который было практически полностью на аяксе, без стопора ехало всё к чертям ибо юзер начинил просто тыкать много и часто, и сбивалась вёрстка и т.п.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/
DiAksID
На сайте с 02.08.2008
Offline
218
#8
LEOnidUKG:
... без стопора ехало всё к чертям ибо юзер начинил просто тыкать много и часто, и сбивалась вёрстка и т.п.

+, мы всегда на время отработки аякса весь экран закрываем полупрозрачным оверлеем, который любые (в том числе и повторные) клики блокирует до success или error (ну и максимум на 5-7 сек, на случай траблов непредвиденных)...

Станислав
На сайте с 27.12.2009
Offline
237
#9

да да, вот и я тыкал тыкал и понял что будет печально если все это так оставить )))

юзеры то не будут ждать пока скрипт обработает все, а он примерно 4-7 секунд подготавливает вывод, за эти 7 секунд они 5к ударов по мыше произведут, а если юзеров за 1к будут хлопать, так вобще сервак потухнет вместе с дц )))

LEOnidUKG
На сайте с 25.11.2006
Offline
1723
#10
Ms-Dred:
да да, вот и я тыкал тыкал и понял что будет печально если все это так оставить )))
юзеры то не будут ждать пока скрипт обработает все, а он примерно 4-7 секунд подготавливает вывод, за эти 7 секунд они 5к ударов по мыше произведут, а если юзеров за 1к будут хлопать, так вобще сервак потухнет вместе с дц )))

Для JQuery есть уже плагины, которые занимаются обработкой т.е. показывают прогресс бар.

Но можно и стандартно, просто слой поверх всего, как писали выше, с картинкой загрузки и надписи "Идёт обработка данных..."

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий