JQuery: форма продолжает отправлять себя без ввода пользователя в Firefox - PullRequest
Новая
       24

JQuery: форма продолжает отправлять себя без ввода пользователя в Firefox

0 голосов
/ 03 ноября 2010

Я строю небольшой эксперимент в php / javascript, где люди должны оценить знакомство с ответами на определенные определения слов. Получив определение, участник должен нажать пробел, чтобы увидеть ответ, и оценить его по шкале от 1 до 7. При нажатии на одну из переключателей отображается следующее определение. Это прекрасно работает в Chrome, но в Firefox после первого определения форма с переключателями продолжает отправлять себя: она отображается для экземпляра, а затем переходит к следующему определению. Кроме того, в IE, кажется, ничего не работает вообще. Я понятия не имею, что вызывает такое поведение. Вот код: 

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

<head>
<title>Experiment</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="jquery.js"></script>


</head>
<body>
<script type="text/javascript" >
    $(document).ready(function(){
        var definitions = ['Solipsism: The philosophical position that I alone exist.',
                           'Ribosomes: The site of protein synthesis in the cell.',
                           'Microglia: Very small cells that remove waste material.'
                           ];
        var responses = [];

        var defCount = -1;

        var loadDefinition = function () {
            defCount++;

            if (defCount < definitions.length) {
                var defString = definitions[defCount];

                var definition = defString.split(': ');

                $('#sentence').text(definition[1]);
                $('#sentence').show();

            }
            else {
                // done
                $('#sentence').html('<b>The experiment is done. Thank you for participating!</b>');
                $('#sentence').show();

                saveData();
            }

        };

        var handleResponse = function () {
            // get sentence + id
            var defString = definitions[defCount];
            var definition = defString.split(': ');

            responses[responses.length] = 999;

            $('#sentence').hide();
            $('#scale').show();

            $('#answer').html('The answer was: <b>'+definition[0]+'</b><br><br>');
        };

        // capture space press
        $(document).keypress(function(e) {
            if (e.charCode == 32 || e.keyCode == 32) {
                handleResponse();
            }
            return false;
        });

        // capture likert scale response
        $('#init-form').submit(function() {
            $('#init').hide();
            loadDefinition();

            return false;
        });

        $("[name=likert]").click(function(){
            // get the value
            var fam_val = $("[name=likert]:checked").val();

            $('[name=likert]').attr('checked', false);

            $('#scale').hide();
            // load new definition
            loadDefinition();

            return false;
        });

        // some init
        $('#sentence').hide();
        $('#scale').hide();
    }); // $(document)
</script>

<div class="mainarea">
    <h1>Definition Familiarity Experiment</h1><br>
    <div id="box">
        <div id="init">
            <form id="init-form">
                <input type="submit" value="Begin Experiment" />
            </form>
        </div>
        <div id="sentence"></div>
        <div id="scale">
            <div id="answer"></div>
            <form id="scale-form">
                <table width="100%"> 
                  <tr>
                    <td></td>
                    <td align="center">1</td>
                    <td align="center">2</td>
                    <td align="center">3</td>
                    <td align="center">4</td>
                    <td align="center">5</td>
                    <td align="center">6</td>
                    <td align="center">7</td>
                    <td></td>
                  </tr>
                <tr><td align="center">totally unfamiliar</td>
                <td align="center"><input type="radio" name="likert" value="1"></td>
                <td align="center"><input type="radio" name="likert" value="2"></td>
                <td align="center"><input type="radio" name="likert" value="3"></td>
                <td align="center"><input type="radio" name="likert" value="4"></td>
                <td align="center"><input type="radio" name="likert" value="5"></td>
                <td align="center"><input type="radio" name="likert" value="6"></td>
                <td align="center"><input type="radio" name="likert" value="7"></td>
                <td align="center">knew the answer</td>
                </tr>
                </table>
            </form>
            <input id="scale-form-submit" type="submit" value="Submit">
        </div>
    </div>
</div>



</body>
</html>

1 Ответ

2 голосов
/ 03 ноября 2010

В Firefox, по-видимому, после первого нажатия кнопки радио он сохраняет фокус.

Это означает, что последующее событие нажатия клавиши будет получено переключателем, таким образом выполняя его обработчик события «щелчка».

Я предлагаю вместо этого захватить событие «нажатия клавиши», используя событиевместо метода «false» вместо метода «Object» вместо метода «Object» используется метод warnDefault (): * Кстати, вам следует использовать свойство «which» объекта события, чтобы определить, какая клавиша была нажата.

...