javascript - event - Evite la acción de hacer clic con jQuery
simulate click jquery (5)
Cualquier controlador de clic agregado por jQuery parece activarse después de los agregados en el marcado. Mi solución sería aplicar los manejadores de clic usando jQuery en lugar de marcar, pero es posible que no tenga suficiente control sobre el código para hacer esto. Si lo hace, simplemente no aplique el controlador de clic para anclar las etiquetas con la clase deshabilitada (y, sí, usaría una clase en lugar de un atributo inapropiado). Si no tiene control sobre el marcado, entonces puede reemplazar el manejador de clic usando jQuery, almacenándolo para volver a aplicarlo más tarde.
$(function() {
$(''a.disabled'').each( function() {
var $this = $(this);
var click = $this.attr(''onclick'');
if (click) {
$this.data(''click'',click);
// add return false to prevent default action
$this[0].onclick = function() { return false; };
}
});
$(''#restoreClick'').click( function() {
$(''a.disabled'').each( function() {
var $this = $(this);
$this.removeClass(''disabled'');
var click = $this.data(''click'');
if (click) {
$this[0].onclick = click;
}
});
});
});
Probado con:
<div>
<a href="#" onclick="alert(''panic!'')">Let''s panic</a>
<a href="#" onclick="alert(''panic!'')" class="disabled">I can''t panic no more</a>
</div>
<div>
<input type="button" id="restoreClick" value="Restore" />
</div>
hay algunos enlaces con acciones de evento onclick
<a href="#" onclick="alert(''panic!'')">Let''s panic</a>
<a href="#" onclick="alert(''panic!'')" disabled="disabled">I can''t panic no more</a>
Necesito evitar la ejecución de eventos actons en enlaces con atributo deshabilitado sin eliminar acciones onclick.
$(''a[disabled]'').click(function(e){
e.stopPropagation();
return false;
});
Este código no me ayuda.
actualización Incluso este código no funciona
<html><head><script type=''text/javascript'' src=''jquery-1.3.2.js''></script></head>
<body>
<a href=''#'' onclick="alert(''HA-ha!'')" disabled="disabled" class="disabled">TEST</a>
<script type="text/javascript">
$(''a[disabled], a.disabled'').click(function(e){
console.log(''override?'');
e.stopImmediatePropagation();
e.preventDefault();
e.stopPropagation();
return false;
});
</script>
</body></html>
El problema es que jQuery agrega eventos en orden. Para detener otros eventos, los eventos que debe detener deben venir después de su código de detención. Como tiene un código en su clic, tendrá que cambiar el orden. Esto es lo que haría:
<a href=''#'' onclick="alert(''HA-ha!'')" class="disabled">TEST</a>
<a href=''#'' onclick="alert(''HA-ha!'')">TEST</a>
<script type="text/javascript">
$(''a'').each(function(){
// Cache event
var existing_event = this.onclick;
// Remove the event from the link
this.onclick = null;
// Add a check in for the class disabled
$(this).click(function(e){
if($(this).hasClass(''disabled'')){
e.stopImmediatePropagation();
e.preventDefault();
}
});
// Reattach your original onclick, but now in the correct order
// if it was set in the first place
if(existing_event) $(this).click(existing_event);
});
</script>
El beneficio es simplemente eliminar / agregar la clase deshabilitada usando jQuery: $(''a#whatever'').addClass(''disabled'') o eliminarlo $(''a#whatever'').removeClass(''disabled'') y ninguna otra limpieza / instalación es requerida.
Encontré una solución bastante simple para evitar onclicks hoy, pero manteniendo la acción si la necesita.
<a href="javascript:alert(''panic!'')" >Let''s panic</a>
<a href="javascript:alert(''panic!'')" disabled="disabled">I can''t panic no more</a>
$(''a'').click(function(e){
if($(this).attr(''disabled'')) e.preventDefault();
});
No soy un gran fan de usar "javascript:", pero esta fue de lejos la solución más simple al problema.
¡Espero eso ayude!
jQuery no va a resolver este OOTB. Puede ser útil, pero ninguno de stopPropagation , stopImmediatePropagation , preventDefault , return false funcionará si simplemente los adjunta al elemento. Debe anular el manejador de clics del elemento.
Sin embargo, usted declara en su pregunta "sin eliminar las acciones onclick" . Por lo tanto, debe anular el comportamiento predeterminado en el momento en que se desencadena el evento (a diferencia del enfoque más limpio de simplemente anular el atributo onclick para anclas desactivadas):
Esto es lo que quiero decir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Disable clicks</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="#" onclick="alert(''panic!'')">Let''s panic</a>
<a href="#" onclick="alert(''panic!'')" disabled="disabled">I can''t panic no more</a>
<script>
$(''a[onclick]'').each(function(){
$(this).data(''onclick'', this.onclick);
this.onclick = function(event) {
if($(this).attr(''disabled'')) { // HERE
return false;
};
$(this).data(''onclick'').call(this, event || window.event);
};
});
</script>
</body>
</html>
El enfoque allí es anular el manejador de clics en línea ( onclick ) con lógica preventiva para detectar el caso en el que el anclaje está "deshabilitado" y luego cancelar el evento (con el resultado return false ).
El beneficio allí es que para habilitar un ancla otra vez, simplemente .removeAttr(''disabled'') en él.
disabled no es una propiedad de anclas. Use algo como rel=''disabled'' lugar.
$(''a[rel="disabled"]'').click( function() { return false; } );
Actualización :
Ah, por supuesto. Todavía dispara la alert porque en realidad está en línea en el marcado. Yo nunca hago eso y entonces no me di cuenta. Saque ese manejador de clic del marcado y hágalo en jQuery en primer lugar para que pueda hacer algo como:
$(''a'').click( function() {
if( $(this).attr(''rel'') == ''disabled'' ) { return; }
// do stuff here when not disabled
return false; // so your ''#'' href doesn''t get used
} );