Javascript OnMouseOver и Out отключить / повторно включить проблему элемента - PullRequest
Новая
       10

Javascript OnMouseOver и Out отключить / повторно включить проблему элемента

0 голосов
/ 05 мая 2009

Я хотел, чтобы некоторые радиокнопки отключались при наведении мыши и включались снова при ее отключении (просто для удовольствия). 

<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>

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

Заранее спасибо.

Ответы [ 4 ]

5 голосов
/ 05 мая 2009

Этого же эффекта можно добиться, поместив переключатели в тег div и установив события onmouseover и onmouseout. 

<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
    <input name="rigged" type="radio">
</div>

Приведенное выше решение работает только в IE, для решения, которое работает в FireFox, выполните следующие действия. 

<script type="text/javascript">
    function toggleDisabled(el) {
        try {
            el.disabled = el.disabled ? false : true;
        }
        catch(E){
        }
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                toggleDisabled(el.childNodes[x]);
            }
        }
     }
</script>

* Эта функция javaScript была заимствована отсюда: Включение или отключение тега DIV и его внутренних элементов управления с использованием Javascript 

<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
    <input name="rigged" type="radio">          
</div>
1 голос
/ 05 мая 2009

Входы не запускают события отключения мыши, потому что они отключены.

Так что вы должны завернуть его в div и поймать события div.

Если вам нужен чистый javascript, используйте пример сценария «toggleDisabled» Phaedrus.

Если вы хотите использовать jQuery и не так уж и новичок: 

<html>
<head>
   <title>Page</title>  
   <script src="jquery-1.3.2.min.js"></script>
   <script>
       $(function() {
           function toggleDisabled(d) {
               var disable = d;
               this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
           }
           $("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
       });
   </script>
</head>
   <body>
        <form>
           <div class="radios">
               <input type="radio" name="rigged" value="1"/> Item One<br />
               <input type="radio" name="rigged" value="2"/> Item Two<br />
               <input type="radio" name="rigged" value="3"/> Item Three<br />
               <input type="radio" name="rigged" value="4"/> Item Four
            </div>
        </form>      
   </body>
</html>
1 голос
/ 05 мая 2009

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

  • При наведении курсора сделайте невидимый div-оверлей над блоком радио. Это сделает невозможным использование. Затем на указателе мыши этого невидимого div удалите div.

  • Вы можете поиграть с координатами мыши x и y и посмотреть, не перекрывают ли они ваши радиоэлементы. Это не оптимальное решение.

Разметка для первого, в jQuery, будет выглядеть примерно так 

$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element

$('#rigged').bind('mouseover', function() {

    $('#overlay').show();

});

$('#overlay').live('mouseout', function() {
    $(this).hide();
});

Вам нужно будет адаптировать это для работы с несколькими элементами.

1 голос
/ 05 мая 2009

У меня была похожая проблема с желанием, чтобы изображение экспонировалось, а затем работало регулярно, когда мышь оставляла изображение. Я использовал jQuery и в итоге подключился к mouseenter и mouseout вместо событий, которые вы используете. Вы можете попробовать это. 

$('#rigged').mouseenter(function() {
    $(this).disabled = true;
  }).mouseout(function() {
    $(this).disabled = false;
  });

Нечто подобное.

Опять же, это использует jQuery.

(Вы должны будете присвоить переключателю ввода идентификатор 'rigged')

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...