'addEventListener' 和 'onclick' 仅适用于 'window' 元素而不适用于任何其他元素（例如按钮）

Question

我正在尝试在 JavaScript 中制作蛇梯棋盘游戏，并尝试将 'onclick' 或 'addEventListener' 事件添加到游戏的按钮中。但是当我试图通过 pb.addEventListener("click",p1click); 将它们添加到我的按钮时，它们不起作用。但是当我通过 window.addEventListener("click",p1click); 将这些事件添加到我的“window”元素时，它们工作正常。这个问题背后的原因是什么？我附上下面的工作代码片段以正确解释我的问题。

const canvas = document.querySelector("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
margin=100;
const c=canvas.getContext('2d');
const img=document.getElementById("board");
c.drawImage(img,0,0,canvas.width-margin,canvas.height-margin);
  pb=document.getElementById("player");
  p1=document.getElementById("text1");
    function p1click(){
        p1.innerHTML="Dice Rolled!";
    }
    
    //window.addEventListener("click",p1click);//Working...
    
    pb.addEventListener("click",p1click);//Not Working!!!

/* Create three equal columns that floats next to each other */
#col1 {
    float: left;
    margin-top: -75px;
    width: 33.33%;
  }
  #col2 {
    float: left;
    margin-top: -75px;
    width: 33.33%;
    margin-left: 33.33%;
  }
  #col3 {
    float: left;
    margin-top: -75px;
    /*margin-top: -75px;*/
    width: 33.33%;
    margin-left: 66.66%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <canvas>
            <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img>
        </canvas>
        <div class="row">
            <div class="column" id="col1">
                <button type="button" id="player">Player</button>
                <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
            <div class="column" id="col2">
                <button type="button" id="reset">Reset Game</button>
                <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
            </div>
            <div class="column" id="col3">
                <button type="button" id="computer">Computer</button>
                <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
        </div>
        
        <script src="./index.js"></script>
    </body>
</html>

Answer 1

按钮是否必须堆叠在 canvas 之上？他们能否不只是在 canvas 元素之上，并且您相应地处理 canvas 大小（例如从 innerHeight 中减去边距，就像我在下面所做的那样）

您还可以删除 margin-tops。请参阅下面的代码片段，它有效：

const canvas = document.querySelector("canvas");
margin=100;
canvas.width = innerWidth;
canvas.height = innerHeight - margin;
const c=canvas.getContext('2d');
const img=document.getElementById("board");
c.save();
c.fillRect(0,0,canvas.width,canvas.height);
c.restore();
c.drawImage(img,0,0,canvas.width-margin,canvas.height-margin);
  pb=document.getElementById("player");
  p1=document.getElementById("text1");
    function p1click(){
        p1.innerHTML="Dice Rolled!";
    }
    
    //window.addEventListener("click",p1click);//Working...
    
    pb.addEventListener("click",p1click);//Not Working!!!

/* Create three equal columns that floats next to each other */
#col1 {
    float: left;
    width: 33.33%;
  }
  #col2 {
    float: left;
    width: 33.33%;
    margin-left: 33.33%;
  }
  #col3 {
    float: left;
    /*margin-top: -75px;*/
    width: 33.33%;
    margin-left: 66.66%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="row">
            <div class="column" id="col1">
                <button type="button" id="player">Player</button>
                <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
            <div class="column" id="col2">
                <button type="button" id="reset">Reset Game</button>
                <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
            </div>
            <div class="column" id="col3">
                <button type="button" id="computer">Computer</button>
                <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
        </div>
        <canvas>
            <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img>
        </canvas>
        <script src="./index.js"></script>
    </body>
</html>

编辑：如果你真的想把行堆叠在Canvas之上，你可以在行上使用绝对位置和高z-index将其放在 canvas 之上。请参阅下面的代码段：

const canvas = document.querySelector("canvas");
margin = 100;
canvas.width = innerWidth;
canvas.height = innerHeight - margin;
const c = canvas.getContext('2d');
const img = document.getElementById("board");
c.save();
c.fillRect(0, 0, canvas.width, canvas.height);
c.restore();
c.drawImage(img, 0, 0, canvas.width - margin, canvas.height - margin);
pb = document.getElementById("player");
p1 = document.getElementById("text1");

function p1click() {
  p1.innerHTML = "Dice Rolled!";
}

//window.addEventListener("click",p1click);//Working...

pb.addEventListener("click", p1click); //Not Working!!!

/* Create three equal columns that floats next to each other */

#col1 {
  float: left;
  width: 33.33%;
}

#col2 {
  float: left;
  width: 33.33%;
  margin-left: 33.33%;
}

#col3 {
  float: left;
  /*margin-top: -75px;*/
  width: 33.33%;
  margin-left: 66.66%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: white;
  border: 1px solid red;
  box-sizing: border-box
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="row">
    <div class="column" id="col1">
      <button type="button" id="player">Player</button>
      <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
    </div>
    <div class="column" id="col2">
      <button type="button" id="reset">Reset Game</button>
      <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
    </div>
    <div class="column" id="col3">
      <button type="button" id="computer">Computer</button>
      <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p>
    </div>
  </div>
  <canvas>
            <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img>
        </canvas>
  <script src="./index.js"></script>
</body>

</html>

'addEventListener' 和 'onclick' 仅适用于 'window' 元素而不适用于任何其他元素（例如按钮）

'addEventListener' and 'onclick' working only on 'window' Element and NOT any other Element(such as button)

html

javascript

onclick

addeventlistener