Opera pass 单击重叠按钮

发布于 2024-10-31 17:13:23 字数 1298 浏览 2 评论 0原文

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

会被按下。重叠<输入>。但是，如果我单击第二个按钮（

jsFiddle 示例

更新：行为：

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

原文

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

When I click on first button(<input>) in Opera 11.01, button don't pressed, because next <div> overlaps <input>. But if I click on second button(<button>), it is visually pressed(event OnClick isn't called). Such behavior is observed in Opera only, in Firefox and Chrome behavior is normal - buttons aren't pressed. What's wrong?

Example on jsFiddle

Updated:
Behavior:

Click to first button in Chrome. It's not clickable, alert doesn't appear. Correct;
Click to second button in Chrome. It's not clickable, alert doesn't appear. Correct;
Click to first button in Opera. It's not clickable, alert doesn't appear. Correct;
Click to second button in Opera. Button visually clicked(!!) - button's style changed to state "pressed", alert doesn't appear. Incorrect - Button shouldn't be pressed, because it is blocked by div. Behavior should coincide with first button;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

是伱的 2024-11-07 17:13:23

尝试在 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

Try adding a z-index on the div

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

Updated: JsFiddle

回复收藏 0 原文

~没有更多了~