JSFiddle - React, Tailwind, and code Playground

by podgorniy

CSS

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript

// Helpers

function bind(obj, event_name, handler) {var handler_wrapper = function(event) {event = event || window.event; if (!event.target && event.srcElement) {event.target = event.srcElement; } return handler.call(obj, event); }; if (obj.addEventListener) {obj.addEventListener(event_name, handler_wrapper, false); } else if (obj.attachEvent) {obj.attachEvent('on' + event_name, handler_wrapper); } return handler_wrapper; }


// Main logic

var firstBodyClickOccured;
firstBodyClickOccured = false;

// body click #1
bind(document.body, 'click', function (event) {
    // Stop all propagation after first click
    if (firstBodyClickOccured) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = false;
        }
    }
    console.log('body click #1', event);
    firstBodyClickOccured = true;
});

// body click #1
bind(document.body, 'click', function (event) {
    console.log('body click #2', event);
});

// document click
bind(document, 'click', function (event) {
    console.info('document click', event);
});