Javascript 防止鼠标单击事件对特定z索引上的元素触发

除了运行所有元素并将它们的onclick设置为function（）{}（如果它们位于某个z索引上），还有什么方法可以禁止onclick事件为特定z索引上的事件触发

编辑：

---

此时，我能想到的最好办法是递归地钩住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 
}

---

当然，然后我将不得不处理相当烦人的IE问题，在DOM元素上设置自定义属性

您可以在事件中检查z索引，并让它在其余部分中冒泡

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>

现在，单击将按如下方式工作：

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

---

如您所见，绿色元素的z指数为：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>

window.onclick=函数（e）
{
var targetElem；
如果（！e）
{
var e=window.event；
}
如果（如目标）
{
targetElem=e.target；
}
else if（如src元素）
{
targetElem=e.src元素；
}
if（targetElem.nodeType==document.TEXT\u节点）
{
targetElem=targetElem.parentNode；
}
if（targetElem.style.zIndex==100）
{
//做事
}
};

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

$（'*'）。每个（函数（）{
var$this=$（this）；
if（$this.css（'z-index'）

---

这与您所做的基本相同，但不需要附加属性或其他您不喜欢的内容。如果您需要保持文本框不变，那么使用

$（'*'）。not（'input:text'）

我必须将其添加到我的每个onClick函数中，我不确定是否要这样做。那么除了您的示例之外，我想不出任何其他方法。使用jQuery或类似的库将相当容易。没有效率的思考。有没有办法防止鼠标向下事件中的onclick触发？我看不出这将如何解决您的问题。但我不知道。@wazz3r在您当前的解决方案

中，此
将是
窗口
对象，而不是单击的元素。我尝试了类似的操作，但根据我阅读的内容，您可以设置window.onclick，并将调用它（即使由于事件传播，该元素具有onclick函数）当它向树上移动时，与任何onclick一起移动。但问题仍然存在：原始的onclick仍将被调用。此时，我能想到的最好方法是递归地钩住DOM树中的每个函数：function preventZIndexClicks（elem）{//如果（！elem.popupflag）{elem.popupflag=1；if（elem.onclick），请确保不是文本节点{var temp=elem.onclick；elem.onclick=function（e）{if（g_threshold>elem.style.zIndex）返回；temp（e）；}}//在elem.childNodes上循环调用}当然，然后我将不得不处理相当恼人的IE问题，在DOM元素上设置自定义属性……唯一的问题是一旦弹出窗口被破坏，原始页面被恢复，每个受影响的元素将没有onclick（）。
$('*').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();
        });
    }
});