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

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

<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» в событии щелчка.

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

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

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

Обновлять:

Если вы добавите это событие в одну из радиокнопок:

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

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

onmousedown = "return false;"

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

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

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

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

Обновлять:

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
0
4 928
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ага, это странная ошибка. Мне удалось придумать обходной путь. Я использую здесь немного 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>

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

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

Единственное, что мы пытаемся сделать, - это по запросу клиента не закрашивать отключенные переключатели и флажки серым цветом. Это было быстрое и простое решение для всех флажков во всех браузерах и всех переключателей во всем, кроме IE (конечно).

CMPalmer 18.12.2008 01:22

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

scunliffe 19.12.2008 00:53

Эх, в этом случае я не могу слишком много спорить. Отмеченные серым флажком трудно читать, и Firefox / IE по-разному визуализирует связанные ярлыки (включая действительно раздражающий способ IE превратить затененный текст в точеный «3D», который выглядит дерьмом на фоне чего-либо, кроме белого.

CMPalmer 19.12.2008 18:39

Как сказал кто-то другой в другом потоке, замена текста Да / Нет Истина / Ложь не так визуально узнаваема, как флажок или переключатель, а остальная часть формы, очевидно, читается только без выделения серым цветом, так зачем проверять / радиоуправления быть разными?

CMPalmer 19.12.2008 18:40
Ответ принят как подходящий

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

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

У меня тоже была эта проблема. В настоящее время мы реализуем 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

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

Другие вопросы по теме