'addEventListener' 和 'onclick' 僅適用於 'window' 元素而不適用於任何其他元素（例如按鈕）
[英]'addEventListener' and 'onclick' working only on 'window' Element and NOT any other Element(such as button)
問題描述
我正在嘗試在 JavaScript 中制作蛇梯棋盤游戲，並嘗試向游戲按鈕添加“onclick”或“addEventListener”事件。 但是當我試圖通過pb.addEventListener("click",p1click);將它們添加到我的按鈕時 ，他們不工作。 但是當我通過window.addEventListener("click",p1click);將這些事件添加到我的“窗口”元素時 ，他們工作正常。 這個問題背后的原因是什么？ 我附上下面的工作代碼片段以正確解釋我的問題。
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>
1 個解決方案
解決方案1
1 已采納 2022-05-09 06:02:26
按鈕是否必須堆疊在 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 之上，您可以在該行上使用 position absolute 以及高 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 只在 forEach 循環中的任何一個元素上使用一次 javascript
[英]addEventListener for only one time on any one element in forEach loop javascript
onclick 和 ontouchstart 不適用於任何元素的移動設備
[英]onclick and ontouchstart not working on mobile for any element
addEventListener如何影響DOM元素的onclick屬性？
[英]how addEventListener influences the onclick property of DOM element?
stopPropagation：element.addEventListener vs onclick屬性
[英]stopPropagation: element.addEventListener vs onclick attribute
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
按鈕Onclick僅適用於第一個元素
onclick 按鈕影響其他元素
Javascript addEventListener 僅適用於第一個元素
僅每個元素的addEventListener
addEventListener 在自定義元素中不起作用
addEventListener 只在 forEach 循環中的任何一個元素上使用一次 javascript
onclick 和 ontouchstart 不適用於任何元素的移動設備
按鈕 OnClick 只返回適用於第一個元素
addEventListener如何影響DOM元素的onclick屬性？
stopPropagation：element.addEventListener vs onclick屬性
相關標簽