Vamos a iniciar con lo básico, cuando hacemos click en un hipervínculo o enlace dentro de nuestro código HTML, se hace la redirección de la página de forma automática y directa a la que está establecida en el código del enlace.
<a href="pagina2.html" >Ir a la página 2</a>
Podemos hacer uso del atributo onClick del hipervínculo para que se ejecute una acción antes de que haga el redireccionamiento de la página. Pensando en esto último, imagina que se tiene que hacer una verificación de algún tipo antes de seguir el enlace, entonces con javascript dentro del onClick escribes event.preventDefault(); en caso de que no cumpla con la validación y no continúe.
<a href="pagina2.html" onclick = "if(var!=4) event.preventDefault();" >Ir a la página 2</a>
Una de las cosas para lo que uso el preventDefault() es cuando uso JQuery y quiero mostrar la página del enlace en un modal (ventana) del Bootstrap.
$("#enlace").click(function(){
event.preventDefault();
$('#myModal .modal-body').html('');
$('#myModal').modal();
$('#myModal .modal-body').append('<iframe src="'+$(this).attr('href')+'" />');
$('#myModal .modal-body iframe').css('width','100%');
$('#myModal .modal-body iframe').css('height','400px');
$('#myModal .modal-body iframe').css('border','0');
});
Agrego un evento click al enlace para anular el direccionamiento a la página donde apunta este enlace. Agrego algo de código para limpiar la ventada cada vez que se carga y agrego un iframe para mostrar la página a la que apunta el enlace.
