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

Question

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

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

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

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

Answer 1

Вы должны установить указатель мыши на disabled = '' вместо.

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

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

РЕДАКТИРОВАТЬ: я немного поиграл с этим и добавил некоторые отступы к 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>

Answer 2

Дивы на помощь!

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

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

Затем:

• Поместите курсор мыши на buttonMouseCatcher, который:
  • меняет его Z-индекс на -1 и
  • включает кнопку.
• Поместите обработчик мыши на кнопку, которая:
  • изменяет z-индекс buttonMouseCatcher обратно на 1 и
  • отключает кнопку

Answer 3

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

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

Answer 4

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