javascript - 如何让背景可点击？

Question

我一直在尝试制作一个包含两张图片和一个积分计数器的网页。页面加载时，选择图片 1，取消选择图片 2。如果您单击 pic1，则不会发生任何事情，但如果您单击 pic2，它会被选中，而 pic1 会被取消选中。然后，如果你点击pic2，什么也不会发生，但是如果你点击pic1，它会被选中，而pic2会被取消选择，等等。当你点击背景时，如果pic1被选中，它会加1分，如果pic2被选中，它增加了 5 分。它还应该在所选图片周围绘制一个黄色方 block 。一切正常，但我不能只让背景给出分数。我尝试了以下代码，但整点计数器停止工作。

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。

Answer 1

您可以在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();" />