JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<div id="box">
</div>

<form id="test_form" action="">
    <label>Name: </label><input type="text" name="name" /><br/>
    <input type="submit" value="Submit" />
    </form>

CSS

#box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    display: none;
    color: white;
    text-align: center;
    font-size: 11px;
}

#test_form {
    margin-left: 150px;
}

JavaScript

(function() {
    var lastEventObject, eventListener = function(e) {
        // keep a scoped referene of the last known mouse event object
        lastEventObject = e;
    };
    
    document.addEvent('mousemove', eventListener);
    
    document.id('test_form').addEvent('submit', function(e) {
        e.stop();
        // not needed anymore...
        document.removeEvent("mousemove", eventListener);
        
        // show the box at last known mouse loc
        document.id("box").setStyles({
            display: 'block',
            left: lastEventObject.page.x,
            top: lastEventObject.page.y
        });
        
        // attach to mousemove or whatever....
      
    });
})();