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
精彩评论