Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > checkbox: непонятная реакция на двойной щелчок

Автор: CaptainFlint 3.10.2006, 12:36

Вот пример странички:

Код

<html>
<head>
<title>Test Page</title>
</head>

<body>
Is checked? <b><span id="checkbox_res">No</span></b><br>
<input type='checkbox' id='test-checkbox' onChange='javascript:set_state()'> test checkbox

<script language="javascript">
var is_checked = 0;
function set_state() {
    var elem;
    var val;
    var checked;
    var i;
    elem = document.getElementById("test-checkbox");
    checked = elem ? elem.checked : 0;
    document.getElementById("checkbox_res").innerHTML = checked ? "Yes" : "No";
}
</script>
</body>
</html>

Требуется, чтобы надпись "Is checked?" всегда корректно отображала состояние флажка. Это работает, но только пока пользователь не сделает двойной щелчок по чекбоксу. При этом галочка меняет состояние дважды (скажем, ставится и снова убирается), но функция set_state вызывается только один раз, в результате при выключенном флажке пишется "Is checked? Yes".

Что пробовал:
1. Добавить onDblClick. Он честно вызывается, но в момент его вызова состояние галочки ещё не изменилось. Т.е. если галочка была снята, и пользователь выполняет двойной щелчок, то при обработке в onDblClick переменная checked получает значение 1, хотя после выполнения двойного щелчка галочка окажется выключенной.
2. Заменить onChange на onClick. Разницы нет.
3. Использовать все три вышеупомянутые функции в различных сочетаниях. С тем же результатом, то бишь, без оного.

Автор: Bikutoru 3.10.2006, 12:48

Если я не ошибаюсь, в IE и Опере onChange срабатывает только при потере элементом фокуса.

Автор: CaptainFlint 3.10.2006, 12:53

Пардон, забыл указать, что это всё проверял только в Опере 9.02.
Проверил в IE - onChange, и правда, не срабатывает. Заменил onChange на onClick, в IE 6 и Firefox 1.5 работает нормально, в Опере, как и было сказано в первом посте, без разницы.

Автор: SamDark 3.10.2006, 12:54

CaptainFlint
Используй для этого onMouseUp.

Автор: CaptainFlint 3.10.2006, 13:02

SamDark, тогда перестаёт работать в IE.

Добавлено @ 13:03
Да и как-то наперекосяк работает: после постановки галочки сообщает, что она не установлена, а после снятия - что установлена. Поменять местами Yes и No, конечно, не проблема, но это как минимум странно...

Автор: 12345c 3.10.2006, 13:48

Очевидно, это благоприобретённый глюк 9-й версии (не знаю, как в 8-й, но в 7.54 -опере работает) :

Код

<table cellspacing=0><tr><td width=33>
  <span id=s1 style>No</span>
</td><td width=33>
  <input type=checkbox id=ch1
    onclick=document.getElementById('s1').innerHTML=this.checked?'Yes':'No';>
</td></tr></table>

В 9-й с DblClick что-то связано. Подобные временнЫе глюки лечатся разумным выбором задержек:

Код


<table cellspacing=0><tr><td width=33>
  <span id=s1 style>No</span>
</td><td width=33>
  <input type=checkbox id=ch1
    onclick=document.getElementById('s1').innerHTML=this.checked?'Yes':'No';
    ondblclick=setTimeout("document.getElementById('s1').innerHTML=document.getElementById('ch1').checked?'Yes':'No';",300);>
</td></tr></table>

- работает в 9-й Оп. и в остальных

Автор: SamDark 3.10.2006, 13:50

CaptainFlint
Ещё посмотрел. Хоть и криво, но можно при помощи того же js определить браузер и выдать чекбокс с onclick для IE и onMouseUp для opera.

Добавлено @ 13:54
CaptainFlint,
Дело и правда в задержке. То-то мне показалось, что в Опере галочки быстрее ставятся smile

12345c,
smile

Автор: CaptainFlint 3.10.2006, 13:55

12345c
Спасибо, я уже именно так и реализовал. smile

Некрасиво, конечно, но обычно чекбоксы выбирают всё же одинарными щелчками, а не двойными.