Question

以下代码是我正在创建的数学难题的简化版本。问题是这样的 - 一旦'inc'变量被重置为'0'（第25行），输入 $（'＃userInput'）。val（）; 的值就不再显示了在#testMessage div。

<body>

<input type="text" id="userInput">

<div id="testMessage"> </div>

<script src="jquery-1.9.1.min.js"></script>
<script>
var inc=0;

init();

function init(){
  $('#userInput').focus();

  $('#userInput').bind('keydown',function(event){
    var keyCode = event.which;
    if( keyCode == 13 ){ // RETURN KEY ...
      var user_ans = $('#userInput').val();

      $('#testMessage').html( user_ans );
      $('#userInput').val('');
      $('#userInput').focus();

      if( inc > 2 ){ inc=0; }
      init();
    }
  });

  inc++;
}

</script>

</body>

如果我向脚本添加计数变量和警报，我会注意到keydown事件多次触发：

<body>

<input type="text" id="userInput">

<div id="testMessage"> </div>

<script src="jquery-1.9.1.min.js"></script>
<script>
var inc=0;
var count=0; // NEW VARIABLE

init();

function init(){
  $('#userInput').focus();

  $('#userInput').bind('keydown',function(event){
    var keyCode = event.which;
    if( keyCode == 13 ){ // RETURN KEY ...
      var user_ans = $('#userInput').val();

      $('#testMessage').html( user_ans );
      $('#userInput').val('');
      $('#userInput').focus();

      alert( count++ ); // NEW ALERT

      if( inc > 2 ){ inc=0; }
      init();
    }
  });

  inc++;
}

</script>

</body>

请解释发生了什么。

Answer 1

当用户点击返回键时，您会反复绑定keydown事件。

多次触发keydown事件

1 个答案: