javascript - 如何使背景可点击？

我一直在尝试制作一个包含两个图片和一个点计数器的网页。页面加载时，将选择图片1而取消选择图片2。如果单击pic1，则什么都不会发生，但是如果单击pic2，它将被选中，而pic1被取消选择。然后，如果您单击pic2，则什么都不会发生，但是如果您单击pic1，它将被选中，而pic2被取消选择，依此类推。当您单击背景时，如果选择了pic1，则将其加1，如果选择了pic2，它增加了5分。它还应在所选图片周围绘制一个黄色正方形。一切都正常，只不过我不能只说背景。我尝试了以下代码，但是整个点计数器停止工作。

function addPoint(number) {
  points = points + number;
  document.getElementById("points").innerHTML = points;
};

function pointsAmmount() {
  chkBox1 = document.getElementById("picture1").checked;
  addPoint(chkBox1 ? 1 : 5);
};

function checkPicture1() {
  document.getElementById("picture1").checked = true;
}

function uncheckPicture1() {
  document.getElementById("picture1").checked = false;
}

function addBorder1() {
  document.getElementById("pic1").style.border = "5px solid yellow";
}

function addBorder2() {
  document.getElementById("pic2").style.border = "5px solid yellow";
}

function removeBorder1() {
  document.getElementById("pic1").style.border = "5px solid white";
}

function removeBorder2() {
  document.getElementById("pic2").style.border = "5px solid white";
}

function onPageload() {
  checkPicture1();
  addBorder1();
  removeBorder2();
}
window.onload = onPageload;
background.onmousedown = pointsAmmount;
var points = 0;

input[type=checkbox] {
  display: none;
}

input[type=button] {
  display: none;
}

<p align="center">Points: <span id="points">0</span></p>
<p align="center">
  <label for="picture1">
    <img src="eslcc_logo.png" alt="eslcc logo" id="pic1"/>
  </label>
</p>
<input id="picture1" type="checkbox" onchange="checkPicture1()" onclick="
    addBorder1();
    removeBorder2();" />
<p align="center">
  <label for="picture2">
    <img src="imac.jpg" alt="iMac" id="pic2"/>
  </label>
</p>
<input id="picture2" type="button" onclick="
    uncheckPicture1();
    addBorder2();
    removeBorder1();" />

我还想指出，我不能使用jQuery。

最佳答案

您可以在onmousedown时获取目标，检查目标（单击的元素）是否为IMG，如果不是，则添加点。

function addPoint(number){
points = points + number;
document.getElementById("points").innerHTML = points;
};
function pointsAmmount(){
chkBox1 = document.getElementById("picture1").checked;
addPoint(chkBox1 ? 1 : 5);
};
function checkPicture1(){
document.getElementById("picture1").checked = true;
}
function uncheckPicture1(){
document.getElementById("picture1").checked = false;
}
function addBorder1(){
document.getElementById("pic1").style.border = "5px solid yellow";
}
function addBorder2(){
document.getElementById("pic2").style.border = "5px solid yellow";
}
function removeBorder1(){
document.getElementById("pic1").style.border = "5px solid white";
}
function removeBorder2(){
document.getElementById("pic2").style.border = "5px solid white";
}
function onPageload(){
checkPicture1();
addBorder1();
removeBorder2();
}
window.onload = onPageload;
document.getElementsByTagName('html')[0].onmousedown = function(e) {
  if(e.target.tagName!="IMG")   pointsAmmount();
}
var points = 0;

input[type=checkbox]{
  display:none;
}
input[type=button]{
  display:none;
}
html {
    height: 100%;
}

<p align="center">Points: <span id="points">0</span></p>
<p align="center"><label for="picture1"><img src="eslcc_logo.png" alt="eslcc logo" id="pic1"/></label></p>
<input id="picture1" type="checkbox" onchange="checkPicture1()" onclick="addBorder1(); removeBorder2();"/>
<p align="center"><label for="picture2"><img src="imac.jpg" alt="iMac" id="pic2"/></label></p>
<input id="picture2" type="button" onclick="uncheckPicture1(); addBorder2(); removeBorder1();" />

关于javascript - 如何使背景可点击？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42897657/