Можете ли вы перехватить эти события радиокнопок в Internet Explorer?

Question

Рассмотрим этот пример кода:

<div class="containter" id="ControlGroupDiv">
  <input onbeforeupdate="alert('bingo 0'); return false;" onclick="alert('click 0');return false;" id="Radio1" type="radio" value="0" name="test" checked="checked" />  
  <input onbeforeupdate="alert('bingo 1'); return false;" onclick="alert('click 1');return false;"  id="Radio2" type="radio" value="1" name="test" />   
  <input onbeforeupdate="alert('bingo 2'); return false;" onclick="alert('click 2');return false;"  id="Radio3" type="radio" value="2" name="test" />   
  <input onbeforeupdate="alert('bingo 3'); return false;" onclick="alert('click 3');return false;"  id="Radio4" type="radio" value="3" name="test" />   
  <input onbeforeupdate="alert('bingo 4'); return false;" onclick="alert('click 4');return false;"  id="Radio5" type="radio" value="4" name="test" />   
  <input onbeforeupdate="alert('bingo 5'); return false;" onclick="alert('click 5');return false;"  id="Radio6" type="radio" value="5" name="test" />   
</div>

В FireFox 2 и 3, установка return false на событие щелчка переключателя предотвращает изменение значения этого параметра и всех других переключателей в группе. Это эффективно делает его доступным только для чтения, не отключая его и не переводя в серый цвет.

В Internet Explorer, если установлен другой переключатель и вы щелкнете по другому в группе, этот флажок сбрасывается до того, как событие щелчка срабатывает на тот, который вы щелкнули. Однако тот, на котором вы щелкнули, не будет выбран из-за 'return false' в событии click.

Согласно MSDN , событие onbeforeupdate срабатывает на всех элементах управления в группе управления до того, как сработает событие щелчка, и я предположил, что именно там очищалась другая радиокнопка , Но если вы попробуете приведенный выше код, оповещение о событии onbeforeupdate не появится - вы просто получите оповещение о событии щелчка. Очевидно, что это событие никогда не будет запущено, или нет способа его поймать.

Есть ли какое-либо событие, которое вы можете перехватить, что позволит вам предотвратить сброс других переключателей в группе?

Обратите внимание, что это упрощенный пример, мы на самом деле используем jQuery для установки обработчиков событий и обработки этого.

Обновление:

Если добавить это событие к одной из переключателей:

onmousedown="alert('omd'); return false;"

Появляется окно предупреждения, вы закрываете его, и событие щелчка никогда не срабатывает . Поэтому мы подумали, что разобрались, но нет, это не может быть так просто. Если вы удалите предупреждение и измените его на следующее:

onmousedown="return false;"

Это не работает. Другие переключатели сбрасываются, и срабатывает событие нажатия на кнопку, которую вы нажали. onbeforeupdate до сих пор никогда не стреляет.

Мы думали, что это может быть время (это всегда теория, хотя это редко и правда), поэтому я попробовал это:

onmousedown="for (i=0; i<100000; i++) {;}; return false;"

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

Обновление:

Internet Explorer отстой. Если кто-то не придумает хорошую идею, мы отказываемся от этого подхода и выбираем расширение jQuery, которое делает то, что мы хотим, но увеличивает нагрузку на клиентские скрипты на странице и требует большего перекодирования HTML из-за сервер рендеринга ASP.Net и отображение имени главной страницы.

Answer 1

Да, это странная ошибка. Мне удалось приготовить обходной путь. Я использую немного Prototype для обработки имен классов здесь. Работает в IE и FF. Вы, вероятно, можете сократить его с помощью селектора вместо простого цикла.

<form name="f1">
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" checked value="A" name="r1" id="radio1" />
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" value="B" name="r1" id="radio2" />
</form>
<script type="text/javascript">
function recordMe() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if(document.f1.r1[x].checked) {
            $(document.f1.r1[x].id).addClassName('radioChecked')
        }
    }
}
function clickCheck() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if($(document.f1.r1[x].id).hasClassName('radioChecked')) {
            $(document.f1.r1[x].id).checked=true
        }
    }
}
</script>

Answer 2

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

function something(type){//type can be 1 or 0
     if(confirm("You will lose all unsaved changes. Continue?")){
     //Do stuff
          switch(type){
               case 1:
                break;
               case 0;
                break;
                default:
                //nothing;
                 break;
          }//!End of switch 
      }else{//They clicked canel
      //Reset checkboxes in IE
          if(type==1){$('#IDofCheckbox1').attr('checked', true);}
          else{$('#IDofCheckbox2').attr('checked', true);}
      }//!End of if they clicked cancel

Answer 3

Вместо установки атрибута onclick на return false вы можете установить невыбранные переключатели на disabled. Это дает тот же эффект, за исключением того, что невыбранные переключатели будут выделены серым цветом.

Answer 4

Ни один из этих подходов не сработал - мы использовали плагин checkbox jQuery, который заменяет флажки и переключатели переключаемыми изображениями. Это означает, что мы можем контролировать вид отключенных элементов управления.

PITA, но это работает.

Answer 5

Какова ваша цель? Если вы просто хотите захватить при внесении изменения, запустите свою логику для события onclick. (это обойдет ошибку IE с onchange)

Если вы пытаетесь изменить ожидаемое поведение переключателей - я настоятельно рекомендую против этого.