开发者

Opera pass click to overlaped button

<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 coinci开发者_如何学编程de with first button;


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜