Skip to content

Instantly share code, notes, and snippets.

@YenTheFirst

YenTheFirst/index.html

Created February 8, 2013 00:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save YenTheFirst/4735672 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save YenTheFirst/4735672 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. YenTheFirst created this gist Feb 8, 2013.
    65 changes: 65 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <html>
    <head>
    <style type="text/css">
    #over{
    position: absolute;
    left: 20;
    }
    </style>

    <script type="text/javascript">
    window.onload = function() {
    base = document.getElementById('base');
    over = document.getElementById('over');
    ev_types = ['onclick', 'onmousemove', 'onmouseover', 'onmouseout'];

    generic_mouse_event = function(e) {
    console.log(this.id,'got mouse event',e.type);
    }

    covered_mouse_element = undefined;
    covering_event = function(e) {
    this.hidden = true;
    new_target = document.elementFromPoint(e.x,e.y);
    this.hidden = false;

    new_e = document.createEvent("MouseEvents");
    new_e.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
    //if we're a harder move/in/out event...
    if (e.type != 'mouseclick'){
    if (typeof(covered_mouse_element) != 'undefined' && covered_mouse_element === new_target) {
    //we're just moving within the current registered
    new_e.type = 'mousemove';
    }
    if (typeof(covered_mouse_element) != 'undefined' && !(covered_mouse_element === new_target)) {
    //we've left our last registered element. send it a mouseout event, and deregister it
    mouse_out = document.createEvent("MouseEvents");
    mouse_out.initMouseEvent('mouseout',e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
    covered_mouse_element.dispatchEvent(mouse_out);
    covered_mouse_element = undefined;
    }
    if (typeof(covered_mouse_element) == 'undefined') {
    //we don't have a currently registered element, so we're mousing in to a new one
    new_e.type = 'mouseover';
    //and register it
    covered_mouse_element = new_target;
    }
    }
    new_target.dispatchEvent(new_e);
    e.preventDefault();
    }

    ev_types.forEach(function(ev) {
    base[ev] = generic_mouse_event;
    over[ev] = covering_event;
    });

    }
    </script>
    </head>
    <body>
    <img src='http://placekitten.com/512/256' id='base'>
    <img src='http://placekitten.com/256/256' id='over'>
    </body>
    </html>