javascript - Opera pass 单击重叠按钮

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 中单击第一个按钮(<input>)时，按钮不会被按下，因为下一个

与 <input> 重叠。但是，如果我单击第二个按钮( )，它会在视觉上被按下(不会调用事件 OnClick)。这种行为仅在 Opera 中出现，在 Firefox 和 Chrome 中行为是正常的 - 按钮未被按下。怎么了？

Example on jsFiddle

更新:行为:

• 点击 Chrome 中的第一个按钮。它不可点击，不会出现警报。 正确；
• 点击 Chrome 中的第二个按钮。它不可点击，不会出现警报。 正确；
• 单击 Opera 中的第一个按钮。它不可点击，不会出现警报。 正确；
• 单击 Opera 中的第二个按钮。按钮视觉上被单击(!!) - 按钮的样式更改为“按下”状态，不出现警报。 不正确 - 不应按下按钮，因为它被 div 阻挡。行为应与第一个按钮一致；

最佳答案

尝试在 div 上添加 z 索引

<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

关于javascript - Opera pass 单击重叠按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5612757/

Answer 1

尝试在 div 上添加 z 索引

<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