Слушатели событий «keyup» и «keydown» JavaScript запускаются только один раз - PullRequest
Новая
       88

Слушатели событий «keyup» и «keydown» JavaScript запускаются только один раз

2 голосов
/ 20 июня 2019

Я начинающий программист JavaScript - это мой первый проект на языке. В настоящее время я пытаюсь запустить временный «таймер», который срабатывает при нажатии клавиши (нажатие клавиши) и заканчивается при отпускании клавиши (нажатие клавиши). В целях тестирования я также заставляю каждую функцию печатать оператор при каждом запуске. К сожалению, я могу получить прослушиватель событий только один раз. Я хочу, чтобы скрипт запускался и отвечал на ввод всякий раз, когда пользователь нажимал любую клавишу. Честно говоря, «таймер» является заполнителем для более крупного проекта - запуск событий keydown / keyup каждый раз, когда пользователь нажимает клавишу, важен не только при первом нажатии.

Я уже испробовал много разных тактик, и я буду продолжать исследовать проблему, ожидая ответа. Сначала я подозревал, что проблема заключалась в том, что я установил JavaScript в головной части html-документа перед его загрузкой, но перемещение его в тело не устранило проблему. Я беспокоился, что это потому, что я не писал новую строку каждый раз, но переход на document.writeln не помог. Я пробовал несколько простых форм зацикливания кода без успеха - в настоящее время я изучаю, как сделать функцию рекурсивной, чтобы посмотреть, поможет ли это. Я также попытался загрузить код в jquery безрезультатно (JQuery один даже не запускается один раз). Я также проделал небольшую работу с такими вещами, как window.setInterval, основываясь на исследовании, которое я провел над кейлоггингом, но я не до конца понимаю, что он делает, и не имел успеха. 

// The initial script
<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript">
    var start, finish, diff;

    // Adds event listeners
    document.addEventListener('keydown',startTimer);
    document.addEventListener('keyup',endTimer);

    // Runs on keydown, simply stores a new date
    function startTimer(e){
        start = new Date();
    }

    // Runs on keyup, stores a new date (time in milliseconds since 
epoch),
    // then takes and prints the difference between the two. 
    function endTimer(e){
        finish = new Date();
        diff = finish - start;
        document.write(diff);
    }

    </script>
  </head>

  <body>
  </body>
</html>

// "Most stable" version, utilizing onkeyup/onkeydown and writeln
<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <script type="text/javascript">
    var start, finish, diff;

      document.onkeydown = function(e){
          start = new Date();
          document.writeln(start);
      }

      document.onkeyup = function(e){
          finish = new Date();
          diff = finish - start;
          document.writeln(finish);
          document.writeln(diff);
      }
    </script>
  </body>
</html>

// JQuery version
<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <script src="jquery-3.4.1.min.js">
    var start, finish, diff;

    $("q").keydown(function(){
      start = new Date();
      document.writeln(start);
    });

    $("w").keyup(function(){
      finish = new Date();
      diff = finish - start;
      document.writeln(finish);
      document.writeln(diff);
    });

    </script>
  </body>
</html>

Я ожидал, что «веб-сайт» будет распечатывать точную сохраненную дату каждый раз, когда я нажимаю клавишу, а затем распечатываю новую дату, когда я отпускаю ее, и разницу между ними. Вместо этого, когда я впервые нажимаю клавишу, она печатает информацию, а затем ничего не печатает, что бы я ни делал.

Отмечу, что JQuery в настоящее время даже не распечатывает первое сообщение - я занимаюсь дополнительным исследованием того, почему - я только что провел очень легкое исследование JQuery.

Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Я думаю, вы хотите что-то вроде этого. 

// The initial script
<!DOCTYPE html>
<html>

 <head>
   <script type="text/javascript">
    var start, finish, diff;

// Adds event listeners
document.addEventListener('keydown',startTimer);
document.addEventListener('keyup',endTimer);

// Runs on keydown, simply stores a new date
function startTimer(e){
    console.log('down', e)
            start = new Date();
        }

        // Runs on keyup, stores a new date (time in milliseconds since 
//  epoch),
        // then takes and prints the difference between the two. 
        function endTimer(e){
      console.log('up', e)
           finish = new Date();
            diff = finish - start;
          console.log('diff', diff)
            document.querySelector('body').innerHTML = (diff);
        } 

   </script>
  </head>

 <body>
 </body>
</html>

Проблема в том, что вы говорите endTimer, чтобы написать количество прошедшего времени: 

document.write(diff)

вызапись в корень документа, а не элемент в документе.После того, как это будет перезаписано, у вас не будет DOM-объекта для события из.

0 голосов
/ 20 июня 2019

Как прокомментировал @JaromandaX, проблема заключается в использовании document.writeln() в вашем обработчике событий.Использование console.log() вместо этого устраняет проблему.

Объяснение: Использование document.write() после загрузки страницы стирает текущий документ и заменяет содержимое любой передаваемой строкой. Кредиты 

var start, finish, diff;

      document.onkeydown = function(e){
          start = new Date();
          console.log(start);
      }

      document.onkeyup = function(e){
          finish = new Date();
          diff = finish - start;
          console.log(finish);
          console.log(diff);
      }
<!--"Most stable" version, utilizing onkeyup/onkeydown and writeln-->
<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
  </body>
</html>
...