JQuery：表单在Firefox中无需用户输入提交本身

我正在php/javascript中构建一个小实验，其中人们必须对某些单词定义的答案进行评分。当给定定义时，参与者必须按空格才能看到答案，并且必须以1至7的比例对其进行评分。单击其中一个单选按钮时，将显示下一个定义。这在Chrome中运行良好，但在Firefox中，在第一次定义之后，带有单选按钮的表单会一直提交自己：它会显示一个实例，然后继续下一个定义。另外，在IE中似乎没有任何工作。我不知道是什么导致了这种行为。这里是代码：JQuery：表单在Firefox中无需用户输入提交本身

<!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>

来源

2010-11-03 Menno

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

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

我建议你捕获“KEYUP”事件，而不是使用事件对象的preventDefault（）方法，而不是返回“假”：

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

顺便说一句，你应该用“它”被罚款事件对象的属性来确定哪个键被按下。

来源

2010-11-03 15:42:10 TataBlack

JQuery：表单在Firefox中无需用户输入提交本身

回答

相关问题