Question

我正在使用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>

Answer 1

在Firefox中，显然，在第一次单击单选按钮后，它会保留焦点。

这意味着单选按钮将接收后续的按键事件，从而执行其“click”事件处理程序。

我建议您使用事件对象preventDefault（）方法而不是返回“false”来捕获“keyup”事件：

$(document).keyup(function(e) {
  if (e.which==32 ) {
    e.preventDefault();
    handleResponse();
  } 
});

顺便说一下，你可以使用事件对象的“which”属性来确定按下了哪个键。

JQuery：表单在firefox中没有用户输入的情况下继续提交自己

1 个答案: