javascript - 激活和停用 EventListener JS vanilla
问题描述
我正在创建一个有两个玩家的游戏。这些球员是 0,1
var activePlayer = [0,1]
根据谁是活动的,我希望仅在播放器处于活动状态时才启用激活每个播放器的控制器的事件侦听器。我尝试以下,但当然,不工作。
function controlGame(){
do{
document.querySelector('.btn-roll-0').addEventListener('click', play,);
document.querySelector('.btn-hold-0').addEventListener('click',hold);
}while(activePlayer === 0)
do{
document.querySelector('.btn-hold-1').addEventListener('click',hold);
document.querySelector('.btn-roll-1').addEventListener('click', play,);
}while(activePlayer === 1)
}
解决方案
忽略完成演示的脚手架代码,并查看事件侦听器。我们只有在活动玩家正确的情况下才会激活。
// This is just for the demo ignore
const play = (player) => {
let newNum = Date.now();
setOut(`Role ${newNum} for Player ${player}`);
};
// This is just for the demo ignore
const hold = (player) => {
setOut(`hold for ${player}`);
};
// This is just for the demo ignore
const setOut = (msg) => {
document.querySelector('#out').innerText = msg;
};
let isActivePlayer = false;
// Here we add event listeners that toggle based on active player.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.btn-roll-0').addEventListener('click', (event) => {
if (!isActivePlayer) play(0);
});
document.querySelector('.btn-hold-0').addEventListener('click', (event) => {
if (!isActivePlayer) hold(0);
});
document.querySelector('.btn-roll-1').addEventListener('click', (event) => {
if (isActivePlayer) play(1);
});
document.querySelector('.btn-hold-1').addEventListener('click', (event) => {
if (isActivePlayer) hold(1);
});
document.querySelector('.btn-switch-plyr').addEventListener('click', (event) => {
isActivePlayer = !isActivePlayer;
});
});
<button class="btn-roll-0">Player 1 Roll</button>
<button class="btn-hold-0">Player 1 Hold</button>
<button class="btn-roll-1">Player 2 Roll</button>
<button class="btn-hold-1">Player 2 Hold</button>
<button class="btn-switch-plyr">Switch Player</button>
<div id="out">
<div>
推荐阅读
- node.js - “MulterError:使用 AWS、Multer S3、NodeJS、Mongo 的 WrappedFileFilter 出现意外字段\n
- c - 这种 1 位单色 B&W bmp 图像的二进制表示有什么问题?
- terraform - Vault - 为一个身份组分配多个别名
- sql - 选择嵌套 json 数组字段包含 PostgreSQL 中提供的数组中的任何值的行?
- python - 从多个网络链接中抓取表格
- jpa - 在(Collection )方法中使用 JPA 规范时没有返回结果
- javascript - addEventListener 不转发参数
- c# - 通过脚本为 Light2D 设置动画
- extjs - ExtJs 7.3 MODERN 中的状态网格
- python - ValueError:缺少提供给“parse_dates”的列:“CRASH_DATE,CRASH_TIME”