Как избежать нескольких нажатий на кнопку

Question

Как избежать нескольких нажатий на кнопку

0

У меня есть следующая и предыдущая кнопка на моей веб-странице. Они получают следующую и предыдущую страницу на доступной средней части. Ответ новой страницы происходит от сервера.

Если пользователь нажимает кнопку несколько раз, например. 5 раз, а 4 страницы пропускаются, а пятый - загружается. То, что я хочу сделать, - это отключить все события кликов, когда первый не завершен.

Я знаю, что могу отключить кнопки при первом щелчке. Но мне не нравится писать логику включения/отключения кнопок. Есть ли какой-либо код, представленный в JavaScript, который работает более разумно.

Ashwin 29 нояб. 2013, в 09:02

Источник

0

Вы храните текущий номер страницы в переменной JavaScript, которую вы ++ нажимаете?
Pranav Gupta 29 нояб. 2013, в 07:17
0

Вы используете панель обновления на странице?
Indranil.Bharambe 29 нояб. 2013, в 07:18
0

@PranavGupta - да, я храню
Ashwin 29 нояб. 2013, в 07:25
0

посмотрите мой ответ, вам не потребуется ни одной строки кода :)
Indranil.Bharambe 29 нояб. 2013, в 07:26
0

вариант отключения кнопки на некоторое время (чтобы они случайно не дважды щелкнули мышью)? скажем, отключить его на секунду или две? В этом случае вы можете отключить его и использовать setTimeout, чтобы включить его через некоторое время ...
carpeliam 29 нояб. 2013, в 07:29
0

@MotaBOS, тогда вместо того, чтобы помещать логику увеличения / уменьшения этой переменной в onclick вы должны переместить ее в обратный вызов ajax
Pranav Gupta 29 нояб. 2013, в 07:29

Показать ещё 4 комментария

Теги:

javascript

jquery

javascript-events

events

4 ответа

Ещё вопросы

Вы храните текущий номер страницы в переменной JavaScript, которую вы ++ нажимаете?
Вы используете панель обновления на странице?
посмотрите мой ответ, вам не потребуется ни одной строки кода :)
вариант отключения кнопки на некоторое время (чтобы они случайно не дважды щелкнули мышью)? скажем, отключить его на секунду или две? В этом случае вы можете отключить его и использовать setTimeout, чтобы включить его через некоторое время ...
@MotaBOS, тогда вместо того, чтобы помещать логику увеличения / уменьшения этой переменной в onclick вы должны переместить ее в обратный вызов ajax

m59 · Answer 1 · 2013-11-29T04-31-00.000Z

У меня есть трюк, который мне нравится совсем немного = D

Я использую этот css:

.page-load-mask {
  position: fixed;
  z-index: 99999;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: progress;
}

с этой разметкой в любом месте страницы:

Когда что-либо загружается, покажите, что div и спрячьте его снова, когда загрузка будет выполнена.

Живой демо здесь (нажмите).

Чтобы далее объяснить, что происходит, так это то, что .page-load-mask будет охватывать всю страницу, когда она видна, и зависание над ней стирает курсор как загрузку. Поскольку он закрывает страницу, ничто не может быть нажато. Вы также можете адаптировать это, чтобы заполнить только раздел страницы, используя position: absolute или другое позиционирование, ширину, высоту и т.д.

это потребует javascript coding .. но пользователь попросил не любить код для включения и выключения. :)
@ Terror.Blade Это абсолютно неправильно. Процитируем OP: «Есть ли в JavaScript какая-либо инструкция кода, которая работает немного умнее». Да, есть. mask.style.display = 'block' .

Indranil.Bharambe · Answer 2 · 2013-11-29T05-17-00.000Z

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

 <asp:UpdateProgress ID="udpProgress" AssociatedUpdatePanelID="update" runat="server">
    <ProgressTemplate>
        <div style="width: 2000px; height: 1000px; background-color: Gray;position: absolute; opacity:50;filter:Alpha(Opacity=50);z-index:10000"> 

        </div>
         <img style="vertical-align: middle; margin-left: 47%; margin-top: 10%; position: absolute;z-index:10001"
                id="imgProgressImage" alt="Progressing" src="Images/LoadingProgress.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>


<asp:UpdatePanel ID="update" runat="server">
 </ContentTemplate >
 <ContentTemplate >
</asp:UpdatePanel>

Кстати, ваш ответ на самом деле плохой. Я не собираюсь понижать голос, но вы не должны публиковать код asp, если ОП не упомянул или не пометил его.
хорошо, но это может быть полезно, если оп на самом деле не знал
На самом деле я искал что-то вроде e.preventdefault
@MotaBOS, если для preventDefault() , что вы ищете, - метод preventDefault() , пожалуйста, переформулируйте ваш вопрос и сделайте его более конкретным. Что говорит ваш вопрос, так это то, что вы не хотите, чтобы события нажатия были успешными, но вы не хотите отключать кнопки. Это именно то, что делает мой ответ. Другие варианты - использовать оператор if в событиях щелчка, который бы «закрывал» действие, или вообще удалять события. Это сложнее, чем просто отключить кнопки для начала.

sheng · Answer 3 · 2013-11-29T10-43-00.000Z

Обычно я отключился и включил кнопку или имел bool. Однако, если вы хотите добавить и удалить прослушиватели событий.

Используйте этот код прямо из MDN.

Это приведет к удалению прослушивателя событий после нажатия кнопки.

var div = document.getElementById("div");

var listener = function (event) {
    div.removeEventListener("click", listener, false);
};

div.addEventListener("click", listener, false);

Pranav Gupta · Answer 4 · 2013-11-29T05-11-00.000Z

По вашему комментарию, вы используете переменную в JS для хранения текущего номера страницы и увеличения/уменьшения на 1 при нажатии на кнопки "Далее" или "Предыдущий".

Это означает, что эта переменная изменяется до того, как завершится вызов ajax, что является причиной вашей проблемы. Даже если вы перейдете по маршруту "только один раз до завершения запроса", появится еще одна потенциальная проблема: когда вызов ajax завершится неудачно, то и ваша переменная изменится - и эта проблема не исчезнет, просто поместив прозрачную маску загрузки, пока ajax запрос делается.

Решение состоит в том, чтобы переместить логику изменения этой переменной в обратный вызов ajax, желательно, также возвращая в ответе ajax номер страницы, на которой вы находитесь.