时间戳

首页 > 解决方案 > 如何在进度条完成之前禁用 onlick 事件？

javascript - 如何在进度条完成之前禁用 onlick 事件？

问题描述

这是我的 JSFiddle：https ://jsfiddle.net/y6pnq7k5/3/

抱歉，如果代码太多，我试图缩小范围。

要查看的主要函数是 generatorClicked() 和 progressBarAnimation()。

当您单击框（例如火咒书）时，我有一个跨越 div 的进度条动画。问题是，如果您点击 div 垃圾邮件，它将在开始时重置进度条，并且因为这是一个空闲游戏，所以进度条在完成工作之前不会受到影响。我尝试过的一种解决方案是通过样式禁用指针事件：

var isClicked = true;
document.GetElementByID(this.id).style.pointerEvents = 'none';
//progress bar animation - after it's done isClicked = false
if(!isClicked) {
    document.GetElementByID(this.id).style.pointerEvents = 'auto';
}

这存在问题，即在第一个进度条完成后进度条不可点击，或者它仍然允许点击垃圾邮件重置进度条，这取决于我将 isClicked 设置为 false 的位置。

我也尝试过像这篇文章中的最佳答案一样创建一个盾牌

这只是阻止了进度条的移动。

我没有任何库，只有香草 JS。我知道我对这个进度条动画的实现也很可疑，但即使我重构它，我仍然需要进度条不受后续点击的影响，因为它会影响游戏玩法。

标签： javascripthtmlcss

解决方案

pointer-events CSS 属性可以在进度条动画开始之前设置为“无”，并在进度条动画停止后重置为其原始值。

var fireGenerators = ["fireSpellTome", "fireWizard", "fireTeacher", "fireSchool"];
var fireGeneratorStrings = ["Fire Spell Tome", "Fire Wizard", "Fire Teacher", "Fire School"];
var fireGeneratorAmount = new Array();

function initFireGenerators() {
  for (i = 0; i < fireGenerators.length; i++) {
    fireGeneratorAmount.push(0);

    var div = document.createElement('div');
    div.id = fireGenerators[i];
    div.className = "fireGenerators";
    div.innerHTML = fireGeneratorStrings[i];
    div.onclick = generatorClicked;

    var progressBar = document.createElement('div');
    progressBar.id = fireGenerators[i] + "ProgressBar";
    progressBar.className = "progressBar";

    var amount = document.createElement('span');
    amount.id = "amountFireGen" + i;
    amount.class = "fireAmounts";
    amount.innerHTML = "0";

    div.appendChild(progressBar);
    div.appendChild(amount);
    main.appendChild(div);
  }
}

function generatorClicked() {
  console.log(this.id + " clicked");
  progressBarAnimation(this.id);
}

function progressBarAnimation(parentID) {
  const progressBarContainer = document.getElementById(parentID);
  const progressBar = document.getElementById(parentID + "ProgressBar"); //Get progressBar div element
  let id = null;
  let currentWidth = 0; //Set the width to 0 

  clearInterval(id);
  progressBarContainer.style.pointerEvents = "none";
  id = setInterval(frame, 10); //TEMPORARY - Need to check what generator and match progress with speed

  function frame() {
    if (currentWidth == 330) {
      clearInterval(id);
      progressBar.style.width = "0px";
      progressBarContainer.style.pointerEvents = "auto";
    } else {
      currentWidth++;
      progressBar.style.width = currentWidth + "px";
    }
  }

  return true;
}

initFireGenerators();
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

div span {
    margin-left: 15px;
}

#main {
    width: 100%;
    height: 80%;
}

#fireSpellTome {
    background-size: 100% 100%;
    background-image: url('../images/firetome.png');
    background-repeat: no-repeat;
}

.fireGenerators {
    position: relative;
    width: 330px;
    height: 170px;
    border:2px solid #000;
    margin-top: 1px;
}

.progressBar {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #111;
    opacity: 0.5;
}
.noPointers {
  pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="stylesheets/game.css">
    </head>
    <body>
        <h1><span id="fireMagicAmount">0</span><br></h1>
        <div id=main></div>
    </body>
</html>

推荐阅读