Вопрос по onmouseout, onmouseover, javascript – Javascript: включить / отключить кнопку при наведении мыши / мышью

2

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

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

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

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

Ваш Ответ

4   ответа
1

согласно спецификации.

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

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 иотключает кнопку
0

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

'<span onmouseout = "document.getElementById (' test '). disabled =' ';">' '<input type = "button" name = "test" id = "test" value = "перевернуть меня"' ' onmouseover = "this.disabled = true;"> '' </ span> 'По-прежнему работает только в IE. Loony2nz
о, и я удалил атрибут onmouseout с кнопки. Loony2nz
5

Вы должны установить указатель мыши на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>
@ Шон: К сожалению, нет. да, было бы лучше, чище и ненавязчивее, если бы у меня была структура, и поэтому я опубликовал это, по старинке (например, старая школа). Я попробую твой код. Спасибо за ваш вклад! Loony2nz
@Shawn: Спасибо за это, но, к сожалению, это тоже не работает :( Loony2nz
Как уже говорили другие, события не будут срабатывать, если они отключены. Вы можете обернуть его в тег span, но это немного странно из-за того, как всплывают события. Используете ли вы какие-либо JavaScript-фреймворки, такие как MooTools или jQuery? Shawn Steward
Это сработало для меня в IE8, FF2 и Chrome. Это может работать лучше, если вы используете кнопку ссылки в стиле CSS вместо кнопки ввода, если вы можете сделать это. Shawn Steward

Похожие вопросы