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

Question

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

4

有没有办法除了运行所有元素并将它们的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 
}

当然，接下来我需要处理相当烦人的IE问题，即在DOM元素上设置自定义属性...

- Jason

3个回答

0

这个怎么样：

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

- John Kurlak

我尝试过类似的东西，但从我所阅读的内容来看，虽然你可以设置window.onclick，并且它会被调用（即使元素具有onclick函数，由于事件传播而被调用），并且随着任何单击向上移动树。但问题仍然存在：原始的onclick仍将被调用。 - Jason

目前，我能想到的最好方法是递归地钩取DOM树中的每个函数：function preventZIndexClicks(elem) { // 确保不是文本节点 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); } } // 在elem.childNodes上递归调用 }当然，接下来我还需要处理在DOM元素上设置自定义属性时比较烦人的IE问题... - Jason

0

使用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')

- Michael Sagalovich

唯一的问题是，一旦弹出窗口被销毁并且原始页面恢复，每个受影响的元素都将没有onclick()。 - Jason

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wazz3r · Accepted Answer

您可以在事件中检查z-index，并让其冒泡到其余部分。

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

EDIT： 为了澄清我的意思，考虑以下内容：

<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;的绿色元素将不会“触发”事件。