JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<button data-action="disable">disable anchor clicks</button>
<div class="container">
<div class="left flyin"></div>    
    <a href="www.google.com">google</a>
</div>

CSS

.flyin {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.left {
    position: fixed;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
}

.test1, .test2 {
    margin: 10px 0;
    cursor: pointer;
}

JavaScript

function setEnable(sel, eventType, enabled) {
    if(enable) {
        $(sel).unbind(eventType, false);
    }
    else {
        $(sel).bind(eventType, false);
    }
}

jQuery('[data-action="disable"]').click(function(){
    setEnable('a', 'click', false); 
}); 


//disable
//$('.my-link').bind('click', false);
//And to unbind / re-enable:
//$('.my-link').unbind('click', false);