Using preventDefault

by Aaron Kahlhamer

HTML

<a href="#">When clicked, the # (hash) will appear in your address bar.</a>

<a class="js-link" href="#">When using preventDefault, it will prevent the default action the browser makes on that event.</a>

<a class="js-link" href="http://www.kohls.com">We can use it stop the browser from going to a link.</a>

CSS

*{
    font-family:helvetica;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

a {
    background:#272928;
    color:#fff;
    display:block;
    margin:3em 1em 1em;
    padding:1em;
    text-decoration:none;
    width:96%;
}

JavaScript

$('.js-link').click(function(lucas) {
   lucas.preventDefault();
    var bool = event.cancelable; // bool contains true or false
    console.log(bool);
});