Javascript onchange вопрос - PullRequest
       3

Javascript onchange вопрос

1 голос
/ 15 февраля 2010

Если у меня есть несколько флажков, таких как:

<input type="checkbox" onchange="foo(bar);" /> Bar

Будет ли функция foo(bar); вызываться только в том случае, если флажок отмечен вкл / выкл нажатием или нажатием клавиши (что я хочу) или если я постепенно проверяю / снимаю флажок с большого числа флажков кнопкой выбора / отмены выбора alll, затем он вызывает функцию onchange для всех флажков (что мне не нужно)?

И все ли браузеры будут работать одинаково?

Ответы [ 2 ]

3 голосов
/ 15 февраля 2010

Internet Explorer (по крайней мере, старые) не запускает событие «change», пока флажок не потеряет фокус. Попробуйте вместо этого использовать "onclick".

Обратный вызов не будет вызван, если ваш код изменит статус «проверено» ([править], кроме случаев, описанных в ответе г-на Бумана)

1 голос
/ 15 февраля 2010

Для onchange поведение зависит от браузера: в IE (даже в IE8) обработчик onchange срабатывает только после того, как флажок теряет фокус (то есть, если проверенное состояние было изменено).

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

В chrome, firefox и opera обработчик onchange появляется сразу после того, как пользователь меняет проверенное состояние. При установлении проверенного состояния программно обработчик onchange никогда не запускается в этих браузерах.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>checkboxes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
</head>
<body>
chk1: <input id="chk1" type="checkbox" 
          onclick="alert('chk1 clicked')" 
          onchange="foo1(this);" /> click me, then click somewhere on the page to blur this
<br/>
chk2: <input id="chk2" type="checkbox" onchange="foo2(this);" />
<br/>
<button onclick="toggleCheck(this)">push me to toggle chk2 programatically</button>
<script>
    function foo1(chk){ alert("chk1 was changed"); }
    function foo2(chk){ alert("chk2 was changed"); }
    function toggleCheck(button){ 
        var chk2 = document.getElementById("chk2"); 
        chk2.focus();
        chk2.checked = !chk2.checked;
        alert("chk2 is now toggeled, but onchange handler didn't fire yet."+ 
        "\nbut if you hit tab right after closing this alert, "+
        "chk2 will lose its focus and still fire the onchange handler in IE.");
    }
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...