superBind

a jquery plugin that calls an eventHandler even when the targeted element is behind other elements. it acts just like the `bind` method.

HTML

<div id="mesh" class="center">
    <p class="center">
        Normally, if you click here, those poor divs that are under me won't respond to your events :( (if you don't belive me, look at your cursor!) 
        <br/> But fear no more!
    </p>
</div>

CSS

.other_el{
    float : left;
    margin : 10px;
    border-radius : 20px;
    -moz-border-radius : 20px;
    -webkit-border-radius : 20px;
    border : 10px dotted green;
    background-color : red;
    text-align : center;
    padding : 20px;
    cursor : pointer;
}
#mesh{
    width : 75%;
    height : 75%;
    opacity : 0.7;
    background-color : #000;
    z-index : 100;
    border-radius : 20px;
    -moz-border-radius : 20px;
    -webkit-border-radius : 20px;
    color : #fff;   
    position : fixed; 
    font-size : 20px;
    font-weight : bold;
    font-family : courier,tahoma,arial;
}
.center{
    text-align : center;
    position : absolute;
    top : 50%;
    left : 50%;
    -webkit-transform : translate(-50%,-50%);
    -moz-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}

JavaScript

// plugin
(function($) {
    $.fn.superBind = function(eventType, callback,callback2) {
        if (typeof callback !== 'function') return this;
        if(eventType === 'hover')
            {
                return this
                        .superBind('mouseenter',callback)
                        .superBind('mouseleave',callback2);
            }
        return this.each(function() {
            var self = this,
                $self = $(this);
            if(eventType == 'mouseenter' || eventType == 'mouseleave')
                var ev = 'mousemove';
            else
                ev = eventType;
            
            $self.data('_mousein',false);
            
            $(document).bind(ev, function(e) {
                var clickX = e.pageX,
                    clickY = e.pageY,
                    offset = $self.offset(),
                    range = {
                        x: [offset.left, offset.left + $self.outerWidth()],
                        y: [offset.top, offset.top + $self.outerHeight()]
                    };
                
                if(clickX >= range.x[0] && clickX <= range.x[1] && clickY >= range.y[0] && clickY <= range.y[1])
                    {
                        if(eventType != 'mouseenter' && eventType != 'mouseleave')                                
                            {
                                callback.call(self, e);
                            }
                        else if(eventType == 'mouseenter' && $self.data('_mousein') === false)                                
                            {
                                $self.data('_mousein',true)
                                callback.call(self, e);
                            }
                    }
                else 
                    {
                        if(eventType == 'mouseleave' && $self.data('_mousein') === true)                                
                        {
                           ...