Forward Mouse Events - iQuery

A plugin for making an overlayed element pass events through it and make the element under it to receive the events. Re-written for JQuery from an ExtJS plugin. The plugin now supports dblclick also.

                            <div class="ForwardEventExamples">
		                        <input id="ToggleForwarding" type="button" value="Stop Forwarding Events" />    
		                        <input id="LogMouseMove" type="button" value="Log Mouse Move" /><br /><br />

                                <div class="ForwardEventContainer">
                                    <div class="ForwardEventElement1">Element1</div>
                                    <div class="ForwardEventElement2">Element2</div> 
                                    <div class="ForwardEventOverLay">Overlayed Element</div>
                                </div> 
		                
                                <div class="ForwardEventsStatus">
			                        Events : <div id="Status"> </div><br /><br />
		                        </div>
	                        </div>  
                        

                       
	                        $(function () {
			                    var i = 0,
				                    logMouseMove = false;

			                    function setStatus(text){
				                    $("#Status").html(i++ + " --> " + text + "<br />" + $("#Status").html()); 
			                    }
			
	                            $(".ForwardEventElement1,.ForwardEventElement2").bind('mouseover mouseout click dblclick mousemove mouseup mousedown',function (e) {
				                    if(!logMouseMove && e.type == 'mousemove')
					                    return;					
				                    if(e.type == 'mouseout' && e.relatedTarget === $(".ForwardEventOverLay")[0])
					                    return; 
				                    if(e.type == 'mouseover' && e.relatedTarget === $(".ForwardEventOverLay")[0])
					                    return; 
	                                setStatus(e.type + " "+ $(e.target).attr('class') + " --> ClientX :  " + e.clientX + " | ClientY : " + e.clientY + " | PageX : " + e.pageX + " | PageY : " + e.pageY + " | CurrentTarget : "+ $(e.currentTarget).attr('class') + " | RelatedTarget : " + $(e.relatedTarget).attr('class'));
	                            });
			
			                    var overlay = $(".ForwardEventOverLay").forwardMouseEvents();
	                            $("#ToggleForwarding").click(function () {
	                                var togglebtn = $(this);
                                    if(togglebtn.val() == "Stop Forwarding Events"){
                                        overlay.forwardMouseEvents("disable");
                                        togglebtn.val("Start Forwarding Events");
                                    }
                                    else {
                                        overlay.forwardMouseEvents("enable");
                                        togglebtn.val("Stop Forwarding Events");
                                    }
	                            });
			
			                    $("#LogMouseMove").click(function(){
				                    logMouseMove = !logMouseMove
				                    $(this).text(logMouseMove ? "Don't Log Mouse Move" : "Log Mouse Move");				 
			                    });
	                        });
	                   
                        

                            .ForwardEventContainer{
                                position:relative;
                                width:300px;
                                height:300px;	
                            }
                            .ForwardEventElement1{
                                width:200px;
                                height:200px;
                                position:absolute;  
                                background:#99FF99;
                            }
                            .ForwardEventElement2{
                                width:200px;
                                height:200px;
                                position:absolute;  
                                background:#FF9999;
                                top:100px;
                                left:100px;  
                            }
                            .ForwardEventOverLay{
                                width:200px;
                                height:200px;
                                position:absolute;
                                z-index:1000;
                                top:50px;
                                left:50px;
                                opacity: 0.7;
                                background:#9999FF;
                            }
                            .ForwardEventsStatus
                            {	
	                            height:250px;	
	                            overflow-y:scroll;
                            }