JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<div class="outer">
OUTER
<div class="inner">
    Inner
    <a id="target" href="#target"> link </a>
</div>
<div class="spacer"></div>
</div>

CSS

.selected {
    background: #faa;
}
.spacer {
    height: 800px;
}

JavaScript

Element.Events.clickout = {
    base : 'click',
    condition : function(event){
        event.stopPropagation(); // stop event bubbling to the body
        return false; // never run handler when clicking on element
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn.bind(this));
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn.bind(this));
    }
};


$$('.inner').addEvents({
    'clickout': function(ev) {
        this.removeClass('selected');
    }
    ,'click': function(ev) {
        this.addClass('selected');
    }
                       });