Javascript: включить/отключить кнопку с наведением/удержанием мыши

Это должно быть довольно просто:

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

Если я наведу курсор мыши на эту кнопку, она отключится..ура! Но теперь, когда я перемещаю курсор, он не включается... бу.

Я понимаю, что концепция отключения означает, что вы ничего не можете с этим поделать. Но как сделать так, чтобы он включался с помощью мыши? Является ли это возможным? Я что-то упускаю?


javascript onmouseover onmouseout
person Loony2nz    schedule 16.11.2009    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вместо этого вы должны установить mouseout на disabled = ''.

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

Отключенное свойство только смотрит, есть ли оно вообще. Вы можете установить disabled='все, что угодно', и оно будет отключено. Раньше вам требовалось только ключевое слово disabled в ваших атрибутах, но для действительного XHTML вам нужно установить каждый атрибут равным чему-то.

EDIT: я немного поиграл с этим и добавил некоторые отступы к тегу SPAN, и это позволяет событиям работать правильно. Без заполнения события не перехватываются, потому что кнопка ввода отключена. Я просто сделал фон красным, чтобы было легко увидеть область, израсходованную SPAN.

<span style="padding: 8px; background: red;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
person Shawn Steward    schedule 16.11.2009
comment
@Shawn: Спасибо за это, но, к сожалению, это тоже не работает :( - person Loony2nz; 16.11.2009
comment
Как уже говорили другие, события не будут срабатывать после его отключения. Вы можете обернуть его тегом span, но это будет немного странно из-за того, как всплывают события. Используете ли вы какие-либо фреймворки javascript, такие как MooTools или jQuery? - person Shawn Steward; 16.11.2009
comment
@Шон: К сожалению, нет. да, это было бы приятнее, чище и ненавязчивее, если бы у меня был фреймворк, поэтому я разместил это по старинке (он же old skool). Я попробую ваш код. Спасибо за ваш вклад! - person Loony2nz; 17.11.2009
comment
У меня это работало в IE8, FF2 и Chrome. Это может работать лучше, если вы используете кнопку ссылки в стиле CSS вместо кнопки ввода, если вы можете это сделать. - person Shawn Steward; 17.11.2009

arrow_upward
2
arrow_downward

Дивы спешат на помощь!

Жаль, что никто толком не ответил на этот вопрос. Можно сделать*.

<div style="display: inline-block; position: relative">
<input type="button" id="button" disabled="disabled">
<div id="buttonMouseCatcher" style="position:absolute; z-index: 1;
  top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>

Затем:

  • Put a mouse-over handler on buttonMouseCatcher that:
    • changes it's z-index to -1 and
    • включает кнопку.
  • Put a mouse-out handler on button that:
    • changes the z-index of buttonMouseCatcher back to 1 and
    • отключает кнопку.
person Kyle Butt    schedule 16.02.2012

arrow_upward
1
arrow_downward

Отключенные элементы формы не запускают события мыши по спецификации.

В качестве обходного пути я использую имитацию отключенного поведения с помощью «отключенного» класса и связанных с ним обработчиков событий. Хорошо работает для кнопок, но я полагаю, что не для ввода текста и флажков.

person Bruno Bergher    schedule 07.07.2011

arrow_upward
0
arrow_downward

у вас может быть внешний элемент, который его окружает, и наведение мыши на этот внешний элемент, которое включает внутренний элемент.

person Brian Schroth    schedule 16.11.2009
comment
о, и я удалил атрибут onmouseout из кнопки. - person Loony2nz; 16.11.2009
comment
'‹span onmouseout=document.getElementById('test').disabled='';›' '‹input type=button name=test id=test value=roll over me' 'onmouseover=this.disabled=true;›' '‹/span›' Все еще работает только в IE. - person Loony2nz; 16.11.2009