Opera pass нажмите на перекрывающуюся кнопку

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

Когда я нажимаю на первую кнопку (‹input›) в Opera 11.01, кнопка не нажимается, потому что следующий ‹div› перекрывает ‹input›. Но если я нажимаю вторую кнопку (‹button›), она визуально нажимается (событие OnClick не вызывается). Такое поведение наблюдается только в Opera, в Firefox и Chrome поведение нормальное - кнопки не нажимаются. Что случилось?

Пример на jsFiddle

Обновлено: Поведение:

  • Нажмите на первую кнопку в Chrome. Не кликабельно, предупреждение не появляется. Правильно;
  • Нажмите на вторую кнопку в Chrome. Не кликабельно, предупреждение не появляется. Правильно;
  • Нажмите на первую кнопку в Opera. Не кликабельно, предупреждение не появляется. Правильно;
  • Нажмите на вторую кнопку в Opera. Кнопка визуально нажата(!!) - стиль кнопки изменился на состояние "нажато", предупреждение не появляется. Неправильно. Кнопку нельзя нажимать, так как она заблокирована div. Поведение должно совпадать с первой кнопкой;

javascript button opera
person unnamed777    schedule 10.04.2011    source источник
comment
В Chrome 12 Dev я не получаю сообщений alert().   -  person Blender    schedule 10.04.2011

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить z-индекс в 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>

Обновлено: JsFiddle

person Elliott    schedule 10.04.2011
comment
Нет, проблема не в том, что я не могу нажать кнопку. Есть div, который перекрывает кнопку. Это должно быть над кнопкой, что я не мог нажать кнопку. Мое решение работает в Firefox и Chrome, но не работает в Opera. В Опере вторая кнопка нажимается несмотря на то, что она перекрывает div - в этом проблема. Я не хочу, чтобы в Опере нажималась вторая кнопка - person unnamed777; 10.04.2011
comment
Ваше решение также не работает в IE9, если вы просто хотите отключить кнопку, почему бы просто не добавить атрибут «отключено» к кнопке? - person Elliott; 10.04.2011
comment
Решение должно работать в Firefox, Chrome и Opera. IE игнорируется. Атрибут disabled не подходит для решения этой задачи. Я могу решить проблему, если буду использовать ‹тип ввода=кнопка› вместо ‹кнопка›. Но хочу понять - в чем проблема с ‹кнопкой› в опере - person unnamed777; 10.04.2011