javascript HTML 中的 z-index 和 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6713647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index and onclick in HTML
提问by Matt
I have the following HTML code:
我有以下 HTML 代码：
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px;
z-index: 50; opacity: .5" onclick="javascript:alert('A')">
<div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"
onclick="javascript:alert('B')" >
</div>
</div>
I was hoping this would make it so that clicking on div B's position would not invoke it's onclick, but only A's since A ha a higher z-index.
我希望这会使得点击 div B 的位置不会调用它的 onclick，而是只有 A，因为 A 具有更高的 z-index。
If not with z-index, how can I achieve this ?
如果没有 z-index，我该如何实现？
回答by KooiInc
You can use event delegationfor that - no need for z-indexes and the like. Assing one (1) click handler to the topmost div and, within the handler, use the event target/srcElement to decide what (not) to do with the originating element. Something like:
您可以为此使用事件委托- 不需要 z-indexes 等。将一 (1) 个单击处理程序分配给最上面的 div，并在处理程序中使用事件目标/srcElement 来决定（不）对原始元素做什么。就像是：
<div id="A" style="width:100px; height: 100px;
background: #00FF00; padding: 15px;
z-index: 50; opacity: .5"">
<div id="B" style="width:50px; height: 50px;
background: #FF0000; z-index:10;" ></div>
</div>
The handler function:
处理函数：
function myHandler(e){
e = e || event;
var el = e.srcElement || e.target;
// no action for #B
if (el.id && /b/i.test(el.id)){ return true; }
alert(el.id || 'no id found');
}
// handler assignment (note: inline handler removed from html)
document.querySelector('#A').onclick = myHandler;
回答by scrappedcola
Your z-index's won't work as you need to change the css position to relative, fixed, or absolute. reference.sitepoint.com/css/z-index.
您的 z-index 将不起作用，因为您需要将 css 位置更改为相对、固定或绝对位置。reference.sitepoint.com/css/z-index。
<div id="A" style="width:100px; height: 100px; background: green; padding: 15px;
z-index: 50; opacity: .5; position:relative;" onclick="alert('A'); return false;">
<div id="B" style="width:100%; height:100%; background: red; z-index:100;position:relative;"
onclick="window.event.stopPropogation();alert('B'); return false;" >
</div>
</div>
回答by simonlchilds
I think using position: absolute in your styles and positioning one over the other would do this. Currently div A and div B sit side by side.
我认为在你的风格中使用 position: absolute 并将一个定位在另一个之上会做到这一点。目前 div A 和 div B 并排坐着。
回答by Satyajit
<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px;
z-index: 50; opacity: .5" onclick="javascript:alert('A')">
<div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"
onclick="javascript:event.preventDeafult();" >
</div>
</div>
Do a "preventDefault" based on when you don't want B to fire.
根据您不希望 B 触发的时间执行“preventDefault”。
回答by MikeM
Here's one way to handle toggling B's onclick event
这是处理切换 B 的 onclick 事件的一种方法
example: http://jsfiddle.net/pxfunc/cZtgV/
示例：http: //jsfiddle.net/pxfunc/cZtgV/
HTML:
HTML：
<div id="A">A
<div id="B">B
</div>
</div>
<button id="toggle">Toggle B onclick</button>
JavaScript:
JavaScript：
var a = document.getElementById('A'),
b = document.getElementById('B'),
toggleButton = document.getElementById('toggle'),
hasOnClick = true;
a.onclick = function() { alert('hi from A') };
b.onclick = function() { alert('hi from B') };
toggleButton.onclick = function() {
if (hasOnClick) {
b.onclick = "";
} else {
b.onclick = function() { alert('hi from B') };
}
hasOnClick = !hasOnClick;
};
for bonus points there's a jQuery solution in the example.
对于奖励积分，示例中有一个 jQuery 解决方案。
