javascript - preventdefault angular 4
preventDefault() en una etiqueta<a> (11)
¿Por qué no solo hacerlo en CSS?
Elimine el atributo ''href'' en su etiqueta de anclaje
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
En tu css,
a{
cursor: pointer;
}
Tengo algunos html / jquery que desliza un div arriba y abajo para mostrar / ocultar, cuando se hace clic en un enlace:
<ul class="product-info">
<li>
<a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
y mi jquery ...
$(''div.toggle'').hide();
$(''ul.product-info li a'').click(function(event){
$(this).next(''div'').slideToggle(200);
}
);
Mi pregunta es: ¿cómo utilizo PreventionDefault () para detener el enlace que actúa como un enlace y agregar # al final de mi URL y saltar a la parte superior de la página? No puedo entender la sintaxis correcta, sigo recibiendo un error que dice que preventDefault () no es una función.
Alternativamente, puede simplemente devolver falso desde el evento click:
$(''div.toggle'').hide();
$(''ul.product-info li a'').click(function(event){
$(this).next(''div'').slideToggle(200);
+ return false;
});
Lo cual detendría la activación del A-Href.
Sin embargo, tenga en cuenta que, por motivos de usabilidad, en un mundo ideal que href aún debería ir a alguna parte, para las personas que desean abrir el enlace en una nueva pestaña;)
Esta es una solución que no es JQuery que acabo de probar y funciona.
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won''t take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
Establezca el atributo href como href="javascript:;"
<ul class="product-info">
<li>
<a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Otra forma de hacerlo en Javascript es inline onclick , IIFE , event y preventDefault() :
<a href=''#'' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
Pruebe algo como:
$(''div.toggle'').hide();
$(''ul.product-info li a'').click(function(event) {
event.preventDefault();
$(this).next(''div'').slideToggle(200);
});
Aquí está la página sobre eso en la documentación jQuery
Puede hacer uso de return false; desde la llamada al evento para detener la propagación del evento, actúa como un event.preventDefault(); negándolo. O puede usar javascript:void(0) en el atributo href para evaluar la expresión dada y luego devolver undefined al elemento.
Devolución del evento cuando se lo llama:
<a href="" onclick="return false;"> ... </a>
Caso vacío:
<a href="javascript:void(0);"> ... </a>
Puede ver más sobre en: ¿Cuál es el efecto de agregar void (0) para href y ''return false'' en click event listener of anchor tag?
Se sugiere que no use return false , ya que 3 cosas ocurren como resultado:
- event.preventDefault ();
- event.stopPropagation ();
- Detiene la ejecución de devolución de llamada y regresa inmediatamente cuando se llama.
Por lo tanto, en este tipo de situaciones, solo debería usar event.preventDefault();
Archivo de artículo - Eventos de jQuery: Detener (Mis) Utilizar Volver Falso
Si detener la propagación del evento no le molesta, solo use
return false;
al final de tu controlador. En jQuery evita el comportamiento predeterminado y detiene el burbujeo del evento.
después de varias operaciones, cuando la página finalmente vaya al enlace, puede hacer lo siguiente:
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr(''href'');
e.preventDefault();
// needed operations
window.location = href;
});
<ul class="product-info">
<li>
<a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Utilizar
javascript: void (0);