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

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

2 голосов
/ 16 ноября 2009

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

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

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

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

Ответы [ 4 ]

5 голосов
/ 16 ноября 2009

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

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

Свойство disabled только проверяет, есть ли оно вообще. Вы можете установить disabled = 'any', и оно будет отключено. Раньше вам нужно было только ключевое слово 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>
2 голосов
/ 17 февраля 2012

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

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

<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 и
    • отключает кнопку.
1 голос
/ 07 июля 2011

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

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

0 голосов
/ 16 ноября 2009

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

...