我正在做一个四连环游戏,现在我只想让控制台记录被点击的div上的div。但是由于某种原因,被记录的div不是被单击的那个。被记录的div总是在面板的底部?有人可以帮我了解为什么会这样。谢谢:)
const board = document.querySelectorAll(".slot");
for(let i = 0; i < board.length; i++) {
board[i].addEventListener('click', dropChip);
}
function dropChip() {
console.log(this);
}
/** {
border: 1px solid red;
}*/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: flex-end;
min-height: 100vh;
background-color: #e6e9ef;
flex-direction: column;
}
.board-wrapper {
/*display: flex;*/
margin: 0 auto;
padding-top: 100px;
position: relative;
overflow: hidden;
}
.board {
display: flex;
background-color: #00c;
flex-wrap: wrap;
max-width: 706px;
padding: 3px;
/*margin: auto;*/
}
.board>div {
width: 100px;
height: 100px;
background-color: blue;
border: 3px solid #00c;
cursor: pointer;
position: relative;
}
.board>div:after {
content: "";
position: absolute;
z-index: 99;
left: 0;
right: 0;
top: -999em;
bottom: -999em;
transition: all .5s ease;
background-color: transparent;
}
.board>div:hover:after {
background-color: #00c;
}
.board>div.counter {
/*display: block;
padding: 0;*/
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
height: 100px;
border: none;
background-color: #e6e9ef;
z-index: 100;
}
.board>div.counter:after {
/*content: "";*/
/*display: block;*/
/*padding: 0;*/
height: 80px;
width: 80px;
background-color: red;
top: 0;
/*left: 0;
right: auto;*/
border-radius: 50%;
transition: transform .5s ease, opacity .2s ease;
/*transform: translateX(0);*/
z-index: 100;
opacity: 0;
}
.board>div.counter:before {
content: "";
display: block;
padding: 0;
position: absolute;
top: 15px;
left: 15px;
right: auto;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
box-shadow: inset 0px 0px 25px #cc0000;
z-index: 101;
transition: transform .5s ease, opacity .2s ease;
/*transform: translateX(0);*/
opacity: 0;
}
.board>div:nth-of-type(7n+1):hover~.counter:after {
transform: translateX(14px);
opacity: 1;
}
.board>div:nth-of-type(7n+2):hover~.counter:after {
transform: translateX(114px);
opacity: 1;
}
.board>div:nth-of-type(7n+3):hover~.counter:after {
transform: translateX(214px);
opacity: 1;
}
.board>div:nth-of-type(7n+4):hover~.counter:after {
transform: translateX(314px);
opacity: 1;
}
.board>div:nth-of-type(7n+5):hover~.counter:after {
transform: translateX(414px);
opacity: 1;
}
.board>div:nth-of-type(7n+6):hover~.counter:after {
transform: translateX(514px);
opacity: 1;
}
.board>div:nth-of-type(7n+7):hover~.counter:after {
transform: translateX(614px);
opacity: 1;
}
.board>div:nth-of-type(7n+1):hover~.counter:before {
transform: translateX(14px);
opacity: 1;
}
.board>div:nth-of-type(7n+2):hover~.counter:before {
transform: translateX(114px);
opacity: 1;
}
.board>div:nth-of-type(7n+3):hover~.counter:before {
transform: translateX(214px);
opacity: 1;
}
.board>div:nth-of-type(7n+4):hover~.counter:before {
transform: translateX(314px);
opacity: 1;
}
.board>div:nth-of-type(7n+5):hover~.counter:before {
transform: translateX(414px);
opacity: 1;
}
.board>div:nth-of-type(7n+6):hover~.counter:before {
transform: translateX(514px);
opacity: 1;
}
.board>div:nth-of-type(7n+7):hover~.counter:before {
transform: translateX(614px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connect Four</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="board-wrapper">
<div class="board">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="counter"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分:4)
已发现问题实际上是CSS,但我将其留在此处以获取更多信息。
常见的方法是将event.target
作为dropChip
函数的参数传递
const board = document.querySelectorAll(".slot");
for(let i = 0; i < board.length; i++) {
board[i].addEventListener('click', function(evt){ dropChip(evt.target) });
}
function dropChip(div) {
console.log(div);
}
在执行回调时,事件侦听器将始终自动提供event
对象,这就是为什么我们在匿名函数上添加了evt
参数的原因。
如果您想简单明了,也可以省略匿名功能
for(let i = 0; i < board.length; i++) {
board[i].addEventListener('click', dropChip);
}
function dropChip(evt) {
console.log(evt.target);
}
您也可以在循环过程中传递迭代项
for(let i = 0; i < board.length; i++) {
board[i].addEventListener('click', function(evt){ dropChip(board[i]) });
}
答案 1 :(得分:2)
注释.board>div:after
CSS规则解决了正确的this
上下文问题。这是因为您所有的插槽div
都具有相同的高度。因此,DOM中最底层的div
位于其余部分之上。您的JS实际上很好,是CSS使div
变得如此之大,以至于您看起来像是在单击其中的一个,但单击是在DOM中更低的其他位置上注册的。
const board = document.querySelectorAll(".slot");
for(let i = 0; i < board.length; i++) {
board[i].addEventListener('click', dropChip);
}
function dropChip() {
console.log(this);
}
/** {
border: 1px solid red;
}*/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: flex-end;
min-height: 100vh;
background-color: #e6e9ef;
flex-direction: column;
}
.board-wrapper {
/*display: flex;*/
margin: 0 auto;
padding-top: 100px;
position: relative;
overflow: hidden;
}
.board {
display: flex;
background-color: #00c;
flex-wrap: wrap;
max-width: 706px;
padding: 3px;
/*margin: auto;*/
}
.board>div {
width: 100px;
height: 100px;
background-color: blue;
border: 3px solid #00c;
cursor: pointer;
position: relative;
}
/* Commented out.
.board>div:after {
content: "";
position: absolute;
z-index: 99;
left: 0;
right: 0;
top: -999em;
bottom: -999em;
transition: all .5s ease;
background-color: transparent;
}*/
.board>div:hover:after {
background-color: #00c;
}
.board>div.counter {
/*display: block;
padding: 0;*/
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
height: 100px;
border: none;
background-color: #e6e9ef;
z-index: 100;
}
.board>div.counter:after {
/*content: "";*/
/*display: block;*/
/*padding: 0;*/
height: 80px;
width: 80px;
background-color: red;
top: 0;
/*left: 0;
right: auto;*/
border-radius: 50%;
transition: transform .5s ease, opacity .2s ease;
/*transform: translateX(0);*/
z-index: 100;
opacity: 0;
}
.board>div.counter:before {
content: "";
display: block;
padding: 0;
position: absolute;
top: 15px;
left: 15px;
right: auto;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
box-shadow: inset 0px 0px 25px #cc0000;
z-index: 101;
transition: transform .5s ease, opacity .2s ease;
/*transform: translateX(0);*/
opacity: 0;
}
.board>div:nth-of-type(7n+1):hover~.counter:after {
transform: translateX(14px);
opacity: 1;
}
.board>div:nth-of-type(7n+2):hover~.counter:after {
transform: translateX(114px);
opacity: 1;
}
.board>div:nth-of-type(7n+3):hover~.counter:after {
transform: translateX(214px);
opacity: 1;
}
.board>div:nth-of-type(7n+4):hover~.counter:after {
transform: translateX(314px);
opacity: 1;
}
.board>div:nth-of-type(7n+5):hover~.counter:after {
transform: translateX(414px);
opacity: 1;
}
.board>div:nth-of-type(7n+6):hover~.counter:after {
transform: translateX(514px);
opacity: 1;
}
.board>div:nth-of-type(7n+7):hover~.counter:after {
transform: translateX(614px);
opacity: 1;
}
.board>div:nth-of-type(7n+1):hover~.counter:before {
transform: translateX(14px);
opacity: 1;
}
.board>div:nth-of-type(7n+2):hover~.counter:before {
transform: translateX(114px);
opacity: 1;
}
.board>div:nth-of-type(7n+3):hover~.counter:before {
transform: translateX(214px);
opacity: 1;
}
.board>div:nth-of-type(7n+4):hover~.counter:before {
transform: translateX(314px);
opacity: 1;
}
.board>div:nth-of-type(7n+5):hover~.counter:before {
transform: translateX(414px);
opacity: 1;
}
.board>div:nth-of-type(7n+6):hover~.counter:before {
transform: translateX(514px);
opacity: 1;
}
.board>div:nth-of-type(7n+7):hover~.counter:before {
transform: translateX(614px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connect Four</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="board-wrapper">
<div class="board">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="counter"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
如果该规则的目的是突出显示一列中的所有div
,则可能需要其他方法。
答案 2 :(得分:1)
通常,我不在事件监听器中使用throw
。我觉得很混乱,应该认为是反模式。您可以使用this
,方法更清晰。
evt.target
至于一个解释,我也很困惑。我认为您的代码应该可以工作...
编辑:原来这是一个CSS问题(请参阅Maaz的answer),我没有调查样式表,所以错过了这一部分。 OP的脚本有效,可以正常工作。