如何检测 DIV 是否被触摸？
[英]How can I detect if a DIV was touched?
问题描述
假设用户有一个 HTML 文件，并且他们正在使用触摸屏设备，比如电话。
我这里有这组代码：
W.onmousedown = function () {
gameOver();
}
基本上它所做的是检测是否单击了名为 W 的 div，如果单击了，则结束游戏。
我想做同样的事情，而是检测用户是否触摸了屏幕上的 DIV。 我怎样才能做到这一点？
编辑：
使用 click for me 不起作用，它不会结束游戏。 这是我的代码：
var gameIsPlaying = true; function game() { gameIsPlaying = true; const RandomLetterGUI = document.getElementById("RandomLetters") const TimerGUI = document.getElementById("Timer") const LivesGUI = document.getElementById("Lives") const ScoreGUI = document.getElementById("Score") const W = document.getElementById("W") const A = document.getElementById("A") const S = document.getElementById("S") const D = document.getElementById("D") W.style.backgroundColor = "white"; W.innerHTML = 'W' A.style.backgroundColor = "white"; A.innerHTML = 'A' S.style.backgroundColor = "white"; S.innerHTML = 'S' D.style.backgroundColor = "white"; D.innerHTML = 'D' const letters = [ "W", "A", "S", "D" ] var seconds = 60; var lives = 3; var score = 0; var timerId = setInterval(countdown, 1000); function countdown() { if (seconds == -1) { gameOver() } else { if (seconds > 9) { TimerGUI.innerHTML = ':' + seconds; } else { TimerGUI.innerHTML = ':0' + seconds; } seconds--; } } countdown() const updateLives = setInterval(displayLives, 0) const ScoreUpdate = setInterval(updateScore, 0) function gameOver() { gameIsPlaying = false clearTimeout(timerId) clearTimeout(updateLives) clearTimeout(ScoreUpdate) W.style.backgroundColor = "red"; W.innerHTML = '' A.style.backgroundColor = "red"; A.innerHTML = '' S.style.backgroundColor = "red"; S.innerHTML = '' D.style.backgroundColor = "red"; D.innerHTML = '' RandomLetterGUI.innerHTML = '' TimerGUI.innerHTML = '' LivesGUI.innerHTML = '' ScoreGUI.innerHTML = '' } function updateScore() { ScoreGUI.innerHTML = "Score: " + score } function displayLives() { LivesGUI.innerHTML = "Remaining Lives: " + lives if (lives == 0) { gameOver() } } function letter() { var item = letters[Math.floor(Math.random() * letters.length)]; RandomLetterGUI.innerHTML = "Next Letter: " + item var pickedLetterTime = Math.floor(Date.now() / 1000) document.onkeypress = function(e) { if (gameIsPlaying) { var key = e.key if (key.toUpperCase();= item) { lives -= 1; if (score >= 0) { score -= 50. } } else { var pressedKeyTime = Math.floor(Date.now() / 1000) var seconds = pressedKeyTime - pickedLetterTime if (seconds > 0 && seconds < 1.5) { score += 500 } if (seconds >= 1;5 && seconds < 3) { score += 350 } if (seconds >= 3 && seconds < 5) { score += 150 } } } }. document.onkeydown = function(e) { var key = e.key if (key == "w") { W.style;backgroundColor = "lime". W.innerHTML = '' } if (key == "a") { A.style;backgroundColor = "lime". A.innerHTML = '' } if (key == "s") { S.style;backgroundColor = "lime". S.innerHTML = '' } if (key == "d") { D.style;backgroundColor = "lime". D.innerHTML = '' } } document.onkeyup = function(e) { if (e.key == "w") { W.style;backgroundColor = "white". W.innerHTML = 'W' } if (e.key == "a") { A.style;backgroundColor = "white". A.innerHTML = 'A' } if (e.key == "s") { S.style;backgroundColor = "white". S.innerHTML = 'S' } if (e.key == "d") { D.style;backgroundColor = "white". D.innerHTML = 'D' } } // touchscreen compatibility W;onclick = function() { gameOver(). } } letter() } game() function resetGame() { if (gameIsPlaying == false) { document.onkeypress = function(e) { var key = e,key if (key == "Enter") { game() } } } } setInterval(resetGame, 0)
body { background-color: black; } p { font-family: Verdana; color: white; font-size: 20px; }.RandomLetters { float: left; }.Timer { float: right; }.Lives { position: absolute; left: auto; }.Score { position: absolute; right: 0; }.center { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 100px; left: 0; right: 0; margin: auto; }.center2 { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }.W, .A, .S, .D { height: 50px; width: 50px; font-family: Verdana; text-align: center; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Play WASD online</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <noscript>turn on javascript to play this game or noob.P</noscript> <p id="RandomLetters" class="RandomLetters"> </p> <p id="Timer" class="Timer"> </p> <br> <p id="Lives" class="Lives"> </p> <p id="Score" class="Score"> </p> <div class="center"> <div id="W" class="W"> </div> </div> <div class="center2"> <div id="A" class="A"> </div> <div id="S" class="S"> </div> <div id="D" class="D"> </div> </div> <script src="script.js"></script> </body> </html>
4 个解决方案
解决方案1
1 2022-12-30 19:27:18
您可以使用click或指针事件
解决方案2
1 2022-12-30 19:27:22
var element= document.getElementById("IDName");
element.onclick = function () {
gameOver();
}
解决方案3
1 已采纳 2022-12-30 19:47:14
它不起作用，因为你用另一个容器遮住了你的W容器并且它不可点击
我改变了容器的顺序，所以W一个现在在前层并且它可以工作
var gameIsPlaying = true; function game() { gameIsPlaying = true; const RandomLetterGUI = document.getElementById("RandomLetters") const TimerGUI = document.getElementById("Timer") const LivesGUI = document.getElementById("Lives") const ScoreGUI = document.getElementById("Score") const W = document.getElementById("W") const A = document.getElementById("A") const S = document.getElementById("S") const D = document.getElementById("D") W.style.backgroundColor = "white"; W.innerHTML = 'W' A.style.backgroundColor = "white"; A.innerHTML = 'A' S.style.backgroundColor = "white"; S.innerHTML = 'S' D.style.backgroundColor = "white"; D.innerHTML = 'D' const letters = [ "W", "A", "S", "D" ] var seconds = 60; var lives = 3; var score = 0; var timerId = setInterval(countdown, 1000); function countdown() { if (seconds == -1) { gameOver() } else { if (seconds > 9) { TimerGUI.innerHTML = ':' + seconds; } else { TimerGUI.innerHTML = ':0' + seconds; } seconds--; } } countdown() const updateLives = setInterval(displayLives, 0) const ScoreUpdate = setInterval(updateScore, 0) function gameOver() { gameIsPlaying = false clearTimeout(timerId) clearTimeout(updateLives) clearTimeout(ScoreUpdate) W.style.backgroundColor = "red"; W.innerHTML = '' A.style.backgroundColor = "red"; A.innerHTML = '' S.style.backgroundColor = "red"; S.innerHTML = '' D.style.backgroundColor = "red"; D.innerHTML = '' RandomLetterGUI.innerHTML = '' TimerGUI.innerHTML = '' LivesGUI.innerHTML = '' ScoreGUI.innerHTML = '' } function updateScore() { ScoreGUI.innerHTML = "Score: " + score } function displayLives() { LivesGUI.innerHTML = "Remaining Lives: " + lives if (lives == 0) { gameOver() } } function letter() { var item = letters[Math.floor(Math.random() * letters.length)]; RandomLetterGUI.innerHTML = "Next Letter: " + item var pickedLetterTime = Math.floor(Date.now() / 1000) document.onkeypress = function(e) { if (gameIsPlaying) { var key = e.key if (key.toUpperCase();= item) { lives -= 1; if (score >= 0) { score -= 50. } } else { var pressedKeyTime = Math.floor(Date.now() / 1000) var seconds = pressedKeyTime - pickedLetterTime if (seconds > 0 && seconds < 1.5) { score += 500 } if (seconds >= 1;5 && seconds < 3) { score += 350 } if (seconds >= 3 && seconds < 5) { score += 150 } } } }. document.onkeydown = function(e) { var key = e.key if (key == "w") { W.style;backgroundColor = "lime". W.innerHTML = '' } if (key == "a") { A.style;backgroundColor = "lime". A.innerHTML = '' } if (key == "s") { S.style;backgroundColor = "lime". S.innerHTML = '' } if (key == "d") { D.style;backgroundColor = "lime". D.innerHTML = '' } } document.onkeyup = function(e) { if (e.key == "w") { W.style;backgroundColor = "white". W.innerHTML = 'W' } if (e.key == "a") { A.style;backgroundColor = "white". A.innerHTML = 'A' } if (e.key == "s") { S.style;backgroundColor = "white". S.innerHTML = 'S' } if (e.key == "d") { D.style;backgroundColor = "white". D.innerHTML = 'D' } } // touchscreen compatibility W;onclick = function() { gameOver(). } } letter() } game() function resetGame() { if (gameIsPlaying == false) { document.onkeypress = function(e) { var key = e,key if (key == "Enter") { game() } } } } setInterval(resetGame, 0)
body { background-color: black; } p { font-family: Verdana; color: white; font-size: 20px; }.RandomLetters { float: left; }.Timer { float: right; }.Lives { position: absolute; left: auto; }.Score { position: absolute; right: 0; }.center { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 100px; left: 0; right: 0; margin: auto; }.center2 { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }.W, .A, .S, .D { height: 50px; width: 50px; font-family: Verdana; text-align: center; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Play WASD online</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <noscript>turn on javascript to play this game or noob.P</noscript> <p id="RandomLetters" class="RandomLetters"> </p> <p id="Timer" class="Timer"> </p> <br> <p id="Lives" class="Lives"> </p> <p id="Score" class="Score"> </p> <div class="center2"> <div id="A" class="A"> </div> <div id="S" class="S"> </div> <div id="D" class="D"> </div> </div> <div class="center"> <div id="W" class="W"> </div> </div> <script src="script.js"></script> </body> </html>
解决方案4
0 2022-12-30 19:20:42
您可以为此使用touchstart事件，请参阅这篇 mdn 文章
W.ontouchstart = function () {
gameOver();
}
如何检测 contenteditable div 中的 HTML 更改？
[英]How can I detect a HTML change inside a contenteditable div?
使用 VeeValidate，我如何查看字段是否已被触摸且有效？
[英]With VeeValidate, how can I see if a field has been touched and is valid?
我有一个带有滚动条的div。 如何检测是否有人在滚动条上按下鼠标？
[英]I have a div with scrollbars. How can I detect if someone mousedowns on the scrollbar?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.