我试图创建这个计算器，我希望在点击整个键/按钮时，数字会出现在屏幕上。但是，如果我单击键/按钮的h1区域，则输出未定义。要了解此问题，请尝试单击白色区域上的键/按钮，然后单击蓝色区域。我该如何解决这个问题？
var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var show = function(e) {
screenText.innerHTML += e.srcElement.firstChild.innerHTML;
}
for(var i = 0 ; i < 14 ; i++) {
evt[i].addEventListener("click", show);
}#calcbody {
width: 400px;
height: 500px;
border: 2px solid black;
}
#screen {
width: 90%;
height: 15%;
border: 1px groove black;
margin: 5%;
text-align: right;
}
.flt {
float: left;
width: 20%;
height: 17%;
border: 1px solid black;
box-sizing: border-box;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt2 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 44%;
height: 17%;
margin-left: 4%;
position: relative;
}
.keys {
text-align: center;
padding-top: 2px;
background-color: skyblue;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calcbody">
<div id="screen"><h1 id="screentext"></h1></div>
<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
</div>
</body>
<script src="script.js"></script>
</html>
答案 0 :(得分：2)
您可以将screenText.innerHTML += e.srcElement.firstChild.innerHTML;更改为screenText.innerHTML += e.currentTarget.innerText;
currentTarget指的是事件绑定的元素，而不是实际点击的元素。在这种情况下，即使用户点击<h1>元素，事件也会冒泡到容器div，这是我们想在此处引用的元素。
var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var show = function(e) {
screenText.innerHTML += e.currentTarget.innerText;
}
for(var i = 0 ; i < 14 ; i++) {
evt[i].addEventListener("click", show);
}#calcbody {
width: 400px;
height: 500px;
border: 2px solid black;
}
#screen {
width: 90%;
height: 15%;
border: 1px groove black;
margin: 5%;
text-align: right;
}
.flt {
float: left;
width: 20%;
height: 17%;
border: 1px solid black;
box-sizing: border-box;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt2 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 44%;
height: 17%;
margin-left: 4%;
position: relative;
}
.keys {
text-align: center;
padding-top: 2px;
background-color: skyblue;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calcbody">
<div id="screen"><h1 id="screentext"></h1></div>
<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
</div>
</body>
<script src="script.js"></script>
</html>
答案 1 :(得分：0)
作为替代方案，您可以使用pointer-events来处理这种情况。
使用这些CSS属性，您可以指定不监听keys元素的任何鼠标事件，如下所示：
.keys {
pointer-events: none;
}