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中無需用戶輸入提交本身

回答

相關問題