javascript - img - Previniendo múltiples clics en el botón

html img events

Question

Tengo el siguiente código jQuery para evitar hacer doble clic en un botón. Funciona bien. Estoy usando Page_ClientValidate() para asegurarme de que se evita el doble clic solo si la página es válida. [Si hay errores de validación, no se debe establecer el indicador ya que no se inició la devolución de datos al servidor]

¿Existe un método mejor para evitar el segundo clic en el botón antes de que la página vuelva a cargarse?

¿Podemos establecer el indicador isOperationInProgress = yesIndicator solo si la página está causando una devolución de datos al servidor? ¿Hay algún event adecuado para él que se llame antes de que el usuario pueda hacer clic en el botón por segunda vez?

Nota : Estoy buscando una solución que no requiera ninguna nueva API

Nota : Esta pregunta no es un duplicado. Aquí estoy tratando de evitar el uso de Page_ClientValidate() . También estoy buscando un event donde pueda mover el código para que no tenga que usar Page_ClientValidate()

Nota : No hay ajax involucrado en mi escenario. El formulario ASP.Net se enviará al servidor de forma síncrona. El evento de clic de botón en javascript es solo para prevenir el doble clic. El envío del formulario es sincrónico utilizando ASP.Net.

Presente código

$(document).ready(function () {
var noIndicator = ''No'';
var yesIndicator = ''Yes'';
var isOperationInProgress = ''No'';
$(''.applicationButton'').click(function (e) {
// Prevent button from double click
var isPageValid = Page_ClientValidate();
if (isPageValid) {
if (isOperationInProgress == noIndicator) {
isOperationInProgress = yesIndicator;
} else {
e.preventDefault();
}
}
});
});

Referencias :

1. El validador provoca un comportamiento inadecuado para la verificación de doble clic
2. Ya sea para usar Page_IsValid o Page_ClientValidate () (para eventos del lado del cliente)

Nota de @Peter Ivan en las referencias anteriores:

llamar a Page_ClientValidate () repetidamente puede hacer que la página sea demasiado intrusiva (alertas múltiples, etc.).

Answer 1

¡Modifiqué la solution de @Kalyani y hasta ahora ha funcionado muy bien!

$(''selector'').click(function(event) {
if(!event.detail || event.detail == 1){ return true; }
else { return false; }
});

Answer 2

Deshabilite los eventos de puntero en la primera línea de su devolución de llamada, y luego reanúdelos en la última línea.

element.on(''click'', function() {
element.css(''pointer-events'', ''none'');
//do all of your stuff
element.css(''pointer-events'', ''auto'');
};

Answer 3

Después de horas de búsqueda lo arreglé de esta manera:

 old_timestamp == null;
$(''#productivity_table'').on(''click'', function(event) {
// code executed at first load
// not working if you press too many clicks, it waits 1 second
if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
{
// write the code / slide / fade / whatever
old_timestamp = event.timeStamp;
}
});

Answer 4

Encontré esta solución que es simple y funcionó para mí:

<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value=''Submitting...''; this.form.submit();">
</form>

Esta solución fue encontrada en: Solución original

Answer 5

Esto debería funcionar para usted:

$(document).ready(function () {
$(''.applicationButton'').click(function (e) {
var btn = $(this),
isPageValid = Page_ClientValidate(); // cache state of page validation
if (!isPageValid) {
// page isn''t valid, block form submission
e.preventDefault();
}
// disable the button only if the page is valid.
// when the postback returns, the button will be re-enabled by default
btn.prop(''disabled'', isPageValid);
return isPageValid;
});
});

Tenga en cuenta que también debe tomar medidas en el lado del servidor para evitar publicaciones dobles, ya que no todos los visitantes de su sitio serán lo suficientemente educados como para visitarlo con un navegador (y mucho menos con un navegador habilitado para JavaScript).

Answer 6

JS proporciona una solución fácil mediante el uso de las propiedades del evento:

$(''selector'').click(function(event) {
if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
// code here. // It will execute only once on multiple clicks
}
});

Answer 7

Podemos usar los clics de encendido y apagado para prevenir clics múltiples. Lo probé en mi aplicación y está funcionando como se esperaba.

$(document).ready(function () {
$("#disable").on(''click'', function () {
$(this).off(''click'');
// enter code here
});
})

Answer 8

Puede ser que esto ayude y le dé la funcionalidad deseada:

$(''#disable'').on(''click'', function(){
$(''#disable'').attr("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>

Answer 9

Si está haciendo un viaje de ida y vuelta completo, puede hacer que desaparezca el botón. Si hay errores de validación, el botón será visible nuevamente al volver a cargar la página.

En primer lugar agrega un estilo a tu botón:

<h:commandButton id="SaveBtn" value="Save"
styleClass="hideOnClick"
actionListener="#{someBean.saveAction()}"/>

A continuación, haga que se oculte cuando se hace clic.

$(document).ready(function() {
$(".hideOnClick").click(function(e) {
$(e.toElement).hide();
});
});

Answer 10

Simplemente copie, pegue este código en su script y edite # button1 con su identificación de botón y resolverá su problema.

 <script type="text/javascript">
$(document).ready(function(){
$("#button1").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script

Answer 11

Una forma de hacerlo es configurar un contador y, si el número supera el número determinado, devuelve false. Tan fácil como esto.

var mybutton_counter=0;
$("#mybutton").on(''click'', function(e){
if (mybutton_counter>0){return false;} //you can set the number to any
//your call
mybutton_counter++; //incremental
});

asegúrese de que, si la declaración está en la parte superior de su llamada.

Answer 12

desactivar el botón al hacer clic, habilitarlo después de que se complete la operación

$(document).ready(function () {
$("#btn").on("click", function() {
$(this).attr("disabled", "disabled");
doWork(); //this method contains your logic
});
});
function doWork() {
alert("doing work");
//actually this function will do something and when processing is done the button is enabled by removing the ''disabled'' attribute
//I use setTimeout so you can see the button can only be clicked once, and can''t be clicked again while work is being done
setTimeout(''$("#btn").removeAttr("disabled")'', 1500);
}

ejemplo de trabajo

Answer 13

usando el conteo,

 clickcount++;
if (clickcount == 1) {}

Después de volver de nuevo, clickcount se establece en cero.