Javascript 如何停止onmousedown再次执行

我有一组按钮，每个按钮在下一次单击特定div内的单击位置时都会添加一个图像。但是，我面临一个问题，即单击按钮后，每次单击都会添加图像，直到我单击其他按钮为止。如何使单击按钮只允许调用onmousedown函数一次

以下是我所拥有的：

函数makeSnow（）{
document.body.style.backgroundColor=“红色”；
document.getElementById（“canvas”）.onmousedown=function（）{
var x=event.clientX；
var y=event.clientY；
var pic=document.getElementById（“SnowBallapper”）；
pic.style.display=''；
pic.style.position='绝对'；
pic.style.left=x-50+‘px’；
pic.style.top=y-50+‘px’；
document.body.style.backgroundColor='蓝色'；
};
};
函数makeCat（）{
document.body.style.backgroundColor=“红色”；
document.getElementById（“canvas”）.onmousedown=function（）{
var x=event.clientX；
var y=event.clientY；
var pic=document.getElementById（“catAppear”）；
pic.style.display=''；
pic.style.position='绝对'；
pic.style.left=x-50+‘px’；
pic.style.top=y-50+‘px’；
document.body.style.backgroundColor='蓝色'；
};
};
函数makeDog（）{
document.body.style.backgroundColor=“红色”；
document.getElementById（“canvas”）.onmousedown=function（）{
var x=event.clientX；
var y=event.clientY；
var pic=document.getElementById（“dogAspect”）；
pic.style.display=''；
pic.style.position='绝对'；
pic.style.left=x-50+‘px’；
pic.style.top=y-50+‘px’；
document.body.style.backgroundColor='蓝色'；
};
};


雪
猫
狗

您可以使用
返回语句退出它们。
您可以使用
返回语句以退出它们。
在事件侦听器结束时，可以将鼠标向下重置为其他不起任何作用的内容：

function makeSnow() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    var x = event.clientX;
    var y = event.clientY;
    var pic = document.getElementById("catAppear");
    pic.style.display = '';
    pic.style.position = 'absolute';
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 50 + 'px';
    document.body.style.backgroundColor = 'blue';
    document.getElementById("canvas").onmousedown = function() {
      //do nothing;
    };
  };
};

其他函数也一样。
在事件侦听器的末尾，您可以将鼠标向下重置为其他不起任何作用的功能：

function makeSnow() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    var x = event.clientX;
    var y = event.clientY;
    var pic = document.getElementById("catAppear");
    pic.style.display = '';
    pic.style.position = 'absolute';
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 50 + 'px';
    document.body.style.backgroundColor = 'blue';
    document.getElementById("canvas").onmousedown = function() {
      //do nothing;
    };
  };
};

然后对其他函数也一样。
尝试使用：

break或
返回在每个函数的末尾
尝试使用：

break或
返回
在每个函数的末尾
您可以在添加图像后立即返回，根据您的喜好添加一个条件，我不确定您到底有什么问题

if (some condition) return;

但在任何事情之前：

function makeSnow() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    var x = event.clientX;
    var y = event.clientY;
    var pic = document.getElementById("catAppear");
    pic.style.display = '';
    pic.style.position = 'absolute';
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 50 + 'px';
    document.body.style.backgroundColor = 'blue';
    document.getElementById("canvas").onmousedown = function() {
      //do nothing;
    };
  };
};

class“container”
还有更多类似的东西，不是你如何用HTML编写类，正确的表示法是
class=“name”
你可以在添加图像后立即返回，根据你的喜好添加一个条件，我不确定你到底有什么问题

if (some condition) return;

但在任何事情之前：

function makeSnow() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    var x = event.clientX;
    var y = event.clientY;
    var pic = document.getElementById("catAppear");
    pic.style.display = '';
    pic.style.position = 'absolute';
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 50 + 'px';
    document.body.style.backgroundColor = 'blue';
    document.getElementById("canvas").onmousedown = function() {
      //do nothing;
    };
  };
};

class“container”
更像是，它不是用HTML编写类的方式，正确的表示法是
class=“name”
有三种方法可以将事件绑定到JavaScript中的一个元素，JavaScript是现在非常讨厌的老式意大利面样式，中间风格的属性矫揉造作不是很糟糕，但实际上不是一个好的做法，以及使用
addEventListener
的流行风格

老式意大利面风格：


函数sayHello（）{
console.log（“你好”）；
}
Say hello
在JavaScript中，有三种方法可以将事件绑定到元素，一种是现在非常讨厌的老式意大利面样式，另一种是带有属性矫揉造作的中间样式，虽然不太糟糕，但实际上并不是一种好的做法，另一种是使用
addEventListener
的流行样式

老式意大利面风格：


函数sayHello（）{
console.log（“你好”）；
}
Say hello
您需要将原始
onmousedown
事件侦听器中的
onmousedown
事件侦听器替换为不执行任何操作的函数。像这样：

function makeCat() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    ...
    document.getElementById("canvas").onmousedown = () => {};
  };
};

您需要将原始
onmousedown
事件侦听器中的
onmousedown
事件侦听器替换为不执行任何操作的函数。像这样：

function makeCat() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    ...
    document.getElementById("canvas").onmousedown = () => {};
  };
};

公认的答案是建议重新定义onmousedown事件处理程序，它可以工作，但需要编写多余的代码。顺便说一下，这是一个较短的版本=）

看起来，一个只触发一次的简单事件侦听器也是一个合适的解决方案

document.getElementById("canvas").addEventListener("mousedown", functionToExecuteOnceEventOccurs, { once: true });

看一看。不过，请注意浏览器兼容性表，“once”选项并没有得到广泛支持。
公认的答案建议重新定义onmousedown事件处理程序，它可以工作，但需要编写多余的代码。顺便说一下，这是一个较短的版本=）

看起来，一个只触发一次的简单事件侦听器也是一个合适的解决方案

document.getElementById("canvas").addEventListener("mousedown", functionToExecuteOnceEventOccurs, { once: true });

看一看。但请注意浏览器兼容性表“一次”选项没有得到广泛支持。
单击按钮后禁用按钮？单击按钮后禁用按钮？我在函数中尝试了这一点，但它仍然会添加图像。您是将其添加到
onmousedown
函数中还是仅添加到
makeSnow
函数中？这将结束函数，但这并不能阻止额外的意外发生。这回答了我的问题。我需要澄清我的问题。我在函数中尝试了这一点，但它仍然添加了图像。您是将其添加到
onmousedown
函数中还是仅添加到
makeSnow
函数中？这会结束函数，但不会阻止额外的onmousedown发生。这回答了我的问题。我需要澄清我的问题。这是我想做的事情的后面部分，我已经想好了；然而，我