キーボードのキーのイベントで別の画面に移る。なぜかイベントが大量に実行される

例えば今http://localhost:9999/#/second/3にいるとして
キーボードでArrowRight(要するに右)を押したらhttp://localhost:9999/#/second/4へ、ArrowLeftを押したらhttp://localhost:9999/#/second/2に移るようにしたいです。
ちなみにhttp://localhost:9999/#/second/1にいたらArrowLeftは効かず、4ページしかない場合http://localhost:9999/#/second/4にいたらArrowRightは効かないようにしています。

html
1<!DOCTYPE html>
2<html lang="jp" ng-app="angularJsBasic">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>FAQ</title>
8  <!-- css関連 -->
9  <link rel="stylesheet" href="./style/reset.css">
10  <link rel="stylesheet" href="./style/css/layout.min.css">
11  <!-- Angularjs関連 -->
12  <script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>
13  <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script>
14  <script src="./js/module.js"></script>
15  <script src="./js/config.js"></script>
16  <script src="./js/controller.js"></script>
17</head>
18<body>
19  <div id="main" ng-view></div>
20  <script src="./js/var.js"></script>
21</body>
22</html>

./js/var.js ↓

js
1let $doc = document
2let $buttonsLeft = $doc.getElementById("buttons__left");
3let $buttonsRight = $doc.getElementById("buttons__right");
4let $menuCheck = $doc.getElementById("header__check")

./js/module.js ↓

js
1let angularJsBasic = angular.module("angularJsBasic", ["ngRoute"])

./js/config.js ↓

js
1angularJsBasic.config(function($routeProvider, $locationProvider){
2  $locationProvider.hashPrefix('');
3  $routeProvider
4    .when('/second', {
5      redirectTo: '/second/1'
6    })
7    .when('/second/:id', {
8      templateUrl: function(params){
9        return `./second/page${params.id}.html`
10      },
11      controller: "SecondController"
12    })
13})

./js/controller.js 下

// ページ数を入れておく
let $secondNum = 4

angularJsBasic.controller(`SecondController`,['$scope', '$routeParams', function($scope, $routeParams){
  $menuCheck.checked = false;
  // 1ページ目は戻るボタン非表示
  if($routeParams.id<=1){
    $buttonsLeft.style.display = 'none';
  }else{
    $buttonsLeft.style.display = 'inline';
  }
  // 最後のページは進むボタン非表示
  if($routeParams.id>=$secondNum){
    $buttonsRight.style.display = 'none';
  }else{
    $buttonsRight.style.display = 'inline';
  }
  prevPage = Number($routeParams.id)-1
  nextPage = Number($routeParams.id)+1
  // 前のページと次のページをそれぞれ設定
  $buttonsLeft.setAttribute("href", `#/second/${prevPage}`)
  $buttonsRight.setAttribute("href", `#/second/${nextPage}`)
  console.log($routeParams.id)
  $doc.addEventListener('keydown', function keyright(event){
    if(event.key=="ArrowRight" && $routeParams.id<$secondNum){
      location.href = `#/second/${nextPage}`
    }else if(event.key=="ArrowLeft" && $routeParams.id>1){
      location.href = `#/second/${prevPage}`
    }
  })
}])

./second/page1.html ↓ (4ページ目まで同様に適当に)

html
1<div>second/page1</div>

2回目以降から2-3ページ飛ばすようになってしまいます。
原因のわかる方いらっしゃいますでしょうか？

行動規範の内容に同意します

回答1件

自己解決

<html lang="jp" ng-app="angularJsBasic" ng-controller="PageController">
〜省略〜
<body ng-keydown="keyDown($event)">
〜省略〜

として、新たにつくったPageControllerでkeyDownを定義しなおして解決しました。
Angularjsの流儀にのっからないとダメなようですね。

投稿2021/02/23 23:39

annaPanda

総合スコア130

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

キーボードのキーのイベントで別の画面に移る。なぜかイベントが大量に実行される

関連した質問