Question

有没有办法禁用onclick事件来触发特定z-index上的事件，除了遍历所有元素并将其onclick设置为function（）{}如果它们在z-index上？

编辑：

此时，我能想到的最好的方法是以递归方式挂钩DOM树中的每个函数：

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 
}

当然，然后我必须处理在DOM元素上设置自定义属性时相当讨厌的IE问题...

Answer 1

你可以检查事件中的z-index，然后让它在其余部分冒泡。

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

修改只是为了澄清我的意思，考虑一下：

<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>

使用此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();
        });
    }
});

这基本上就像你做的那样，但不需要额外的属性或任何你不喜欢的东西。如果您需要保持文本框不变，请使用$('*').not('input:text')

防止鼠标单击事件触发特定z-index上的元素

3 个答案: