Preventing a mouse click event when starting items at a specific z-index

Question

Is there a way to disable onclick events from triggering events in a particular z-index, in addition to running all the elements and setting their onclick to the function () {}, if they are in this z-index?

Edit:

At this point, the best I can think of is to intercept every function in the DOM tree recursively:

function preventZIndexClicks(elem) {
    // ensure not a text node

    if(!elem.popupflag) { elem.popupflag = 1; 
        if(elem.onclick) { var temp = elem.onclick; 
        elem.onclick = function(e) { 
            if(g_threshold > elem.style.zIndex)  
                return; 
            temp(e);}
        } 
    }

    // Call recusively on elem.childNodes 
}

Of course, then I will have to deal with quite annoying IE problems with setting custom properties on DOM elements ...

Answer 1

You can check the z-index in the event and let it bubble in the rest.

function onclick(e) {
    if(this.style.zIndex == 10) return;
    //do stuff
}

EDIT: Just to clarify how I mean, consider this:

<div id="div1" style="background-color: red;width:100px;height:100px;z-index:1">
    <div id="div2" style="background-color: green;width:50px;height:50px;z-index:2">
        <div id="div3" style="background-color: blue;width:25px;height:25px;z-index:3">
        </div>
    </div>
</div>

With this javascript:

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
bind(div1,"click",click);
bind(div2,"click",click);
bind(div3,"click",click);

function click(e) {
    if(this.style.zIndex == 2) return;
    alert(this.style.backgroundColor);
}

function bind(element,event,callback){
    var onevent="on"+event;
    if(element.addEventListener)
        element.addEventListener(event,callback,false);
    else if(element.attachEvent)
        element.attachEvent(onevent,callback);
    else{
        var e=element[onevent];
        element[onevent]=function(){
            var h=e.apply(this,arguments),cbk=callback.apply(this,arguments);
            return h==undefined?cbk:(cbk==undefined?h:cbk&&h);
        }
    }
}

:

click red: -> alert "red"
click green: -> alert "red"
click blue: -> alert "blue" -> alert "red"

z-index: 2; ""

Answer 2

- :

<script type="text/javascript">
window.onclick = function(e)
{
    var targetElem;

    if (!e)
    {
        var e = window.event;
    }

    if (e.target)
    {
        targetElem = e.target;
    }
    else if (e.srcElement)
    {
        targetElem = e.srcElement;
    }

    if (targetElem.nodeType == document.TEXT_NODE)
    {
        targetElem = targetElem.parentNode;
    }

    if (targetElem.style.zIndex == 100)
    {
        // do stuff
    }
};
</script>

Answer 3

jQuery:

$('*').each(function() {
    var $this = $(this);
    if ($this.css('z-index') < g_threshold) {
        $this.unbind('click'); //unbinds all click handlers from a DOM element
        $this.click(function(e) {
            e.stopPropagation();
        });
    }
});

it basically looks like what you are doing, but does not require additional attributes or anything else that you don't like. If you need to leave, say, the text box intact, then use$('*').not('input:text')