Javascript 播放/暂停按钮键盘事件答案

【问题标题】：Javascript Play/Pause button Keyboard eventJavascript 播放/暂停按钮键盘事件
【发布时间】：2017-07-10 01:02:31
【问题描述】：

我仍在开发音乐播放器，已分配鼠标控件，但我在播放/暂停按钮上的键盘事件方面没有遇到什么问题。

到目前为止，我让用户能够通过按空格键“单击”播放按钮。发生的情况是 PLAY 按钮被隐藏并被 PAUSE 按钮取代。

我现在想要的是让用户能够再次按空格键，以便它“点击”暂停，从而再次显示 PLAY。

这是我所拥有的：

html

<div>

            <a href="#" id="play"> </a> 

            <a href="#" id="pause" style="display: none;"></a>

</div>

脚本

<script>

/* mouse */

    $('#play').on('click', function(event) {
        console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();

    $('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();

    $('#pause').hide();
    $('#play').show();
    });

/* keyboard */

var play = document.getElementById("play");
var pause = document.getElementById("pause");


document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        play.click();
    }
    else if(e.keyCode == 32) {
        pause.click();
    }
}; 


    </script>

我错过了什么？

【问题讨论】：

我找不到第一行函数的右花括号，先检查一下

标签： javascript jquery keyboard keyboard-events

【解决方案1】：

错误就在这里：

document.onkeydown = function (e) {
  if (e.keyCode == 32) {
    play.click();
  } else if(e.keyCode == 32) {
    pause.click();
  }
};

无法执行第二个条件，因为每次 keyCode 为 32 时，它只适用于第一个条件。您可以声明一个变量“isPlaying”来指示您是否正在播放播放器。

var isPlaying = false;
document.onkeydown = function (e) {
 if (e.keyCode == 32) {
  if (isPlaying) {
    pause.click();
  } else {
    play.click();
  }
  isPlaying = !isPlaying; // if true equal false, if false equal true
 }
};

【讨论】：

【解决方案2】：

第一个错误是你没有关闭所有括号，第二个是这部分代码：

if (e.keyCode == 32) {
    play.click();
}
else if(e.keyCode == 32) {
    pause.click();
}

我建议使用一个变量来检查按钮播放是否被按下：

 var ispaused = true;
 var play = document.getElementById("play");
var pause = document.getElementById("pause");
 $('#play').on('click', function(event) {
 ispaused = false;
        console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();

/* keyboard */




});
    $('#pause').on('click', function(event) {
    ispaused = true;
    //currentPlayingTrack.pause();

    $('#pause').hide();
    $('#play').show();
    });

    document.onkeydown = function (e) {
    if (e.keyCode == 32) {
    if(ispaused == true ){
        play.click();
        }else{
        pause.click();
        }
    }

};

fiddle

【讨论】：

【解决方案3】：

它有效。你在任何时候空格时仔细检查空格键代码，第一个条件每次都为真。

其次，您需要使用 $bla 代替 $("#blablabla") 。它运行近 600 行代码，每次都选择查找对象。所以不要让重复工作。

Final,$() 就像 $(doucument).ready() 一样。渲染完成后就完成了，DOM 没问题。就是这样！

** 代码**

$(function () {
  let $play = $("#play");
  let $pause = $("#pause");
  $play.on('click', function (event) {
    console.log('play click clicked');
    //currentPlayingTrack.play();
    $pause.show();
    $play.hide();
  });
  $pause.on('click', function (event) {
    //currentPlayingTrack.pause();
    $pause.hide();
    $play.show();
  });

  /* keyboard */

  document.onkeydown = function (e) {
    if (e.keyCode == 32) {
      toggle = !toggle;
      $play.trigger("click");
    }
    else if (e.keyCode == 32) {
      toggle = !toggle;
      $pause.trigger("click");
    }
  };
});

【讨论】：

【解决方案4】：

似乎您缺少更多关于 js 的知识，随着时间的推移，这将是:) 这是一个关于我如何完成此任务的代码笔。

http://codepen.io/smplejohn/pen/zNVbRb

<a href="#" class="playpause">Play</a> 
<a href="#" class="playpause" style="display:none">Pause</a>

$('.playpause').click(function(){
  $('.playpause').toggle();
  return false;
});

document.onkeydown = function (e) {
  if (e.keyCode == 32){     
    $('.playpause').toggle();
  }
};

【讨论】：