Question

<div style="width: 100px; height: 25px; position: relative;">
    <input type="button" style="width: 100px; height: 25px;" onclick="alert(1);" value="Input"/>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>

当我在Opera 11.01中点击第一个按钮（＆lt; input＆gt;）时，没有按下按钮，因为下一个＆lt; div＆gt;重叠＆lt;输入＆gt;。但是，如果我点击第二个按钮（＆lt; button＆gt;），则会在视觉上按下（不会调用事件OnClick）。仅在Opera中观察到此类行为，在Firefox和Chrome中行为正常 - 按钮未按下。怎么了？

Example on jsFiddle

更新：行为：

点击Chrome中的第一个按钮。它不可点击，不会出现警报。正确
点击Chrome中的第二个按钮。它不可点击，不会出现警报。正确
点击Opera中的第一个按钮。它不可点击，不会出现警报。正确
点击Opera中的第二个按钮。视觉上单击按钮（!!） - 按钮的样式更改为“按下”状态，不显示警报。 不正确 - 不应按下按钮，因为它被div阻止。行为应与第一个按钮重合;

Answer 1

尝试在div上添加z-index

<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Inpute</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-indeX: -1;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-index: -1;"></div>
</div>

更新：JsFiddle

Opera pass点击重叠按钮

1 个答案: