如何阻止onmousedown再次执行

时间：2017-11-03 15:29:30

标签： javascript html

我有一组按钮，每个按钮在下一次点击时在特定div内的点击位置添加图像。但是，我遇到的问题是，在我点击按钮后，每次点击都会添加图片，直到我点击不同的按钮。如何点击按钮只允许调用onmousedown函数一次？

这就是我所拥有的：

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

function makeCat() {
  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';
  };
};

function makeDog() {
  document.body.style.backgroundColor = "red";
  document.getElementById("canvas").onmousedown = function() {
    var x = event.clientX;
    var y = event.clientY;
    var pic = document.getElementById("dogAppear");
    pic.style.display = '';
    pic.style.position = 'absolute';
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 50 + 'px';
    document.body.style.backgroundColor = 'blue';
  };
};
＆＃13; 
<div id="container" class "container">
  <div id='canvas' style="background-color: green; width: 300px; height: 300px;">
  </div>
  <ul>
    <button onClick="makeSnow()">
    <li>snow</li>
    </button>
    <button onClick="makeCat()">
    <li>cat</li>
    </button>
    <button onClick="makeDog()">
    <li>dog</li>
    </button>
  </ul>
  <div class "picture">
    <img alt="snowballAppear" id="snowballAppear" style="display: none; width: 100px; height: 100px;" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815" />
  </div>
  <div class "picture">
    <img alt="catAppear" id="catAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?h=350&auto=compress&cs=tinysrgb" />
  </div>
  <div class "picture">
    <img alt="dogAppear" id="dogAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/39317/chihuahua-dog-puppy-cute-39317.jpeg?h=350&auto=compress&cs=tinysrgb" />
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：2)

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

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

答案 1 :(得分：1)

在您的事件监听器结束时，您可以将mousedown重置为其他无法执行任何操作的内容：

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;
    };
  };
};

然后对其他功能也一样。

答案 2 :(得分：1)

有三种方法可以将事件绑定到JavaScript中的元素，这种旧式的意大利面条风格现在非常讨厌，具有属性修饰的中间风格并不是那么糟糕但不是真正的好习惯，而且时尚正在使用addEventListener的样式。

旧式意大利面风格：

function sayHello() {
  console.log("hello");
}
<button onclick="sayHello()">Say hello</button>

具有属性影响的中间风格：

var btn = document.getElementById("btn");

btn.onclick = sayHello;

function sayHello() {
  console.log("hello");
}
<button id="btn">Say hello</button>

addEventListener的时尚风格：

var btn = document.getElementById("btn");

btn.addEventListener("click", sayHello);

function sayHello() {
  console.log("hello");
}
<button id="btn">Say hello</button>

最后两种风格避免使用HTML + JS汤。这被认为是一种很好的做法，有助于产生“不引人注目的JavaScript”（Wikipedia来拯救）。话虽这么说，第三种方法通常是最好的选择，因为它可以很容易地处理多个听众：

var btn = document.getElementById("btn");

btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayGoodbye);

function sayHello() {
  console.log("hello");
}

function sayGoodbye() {
  console.log("goodbye");
}
<button id="btn">Say hello and goodbye</button>

现在要解决“一键，一张图片”问题，只要用户点击按钮，您就需要停止收听。要执行此操作，您可以重置onclick属性，或使用名为removeEventListener的新函数。两个选项的一个片段：

var btn = document.getElementById("btn");

btn.onclick = sayHello;
btn.addEventListener("click", sayGoodbye);

function sayHello() {
  console.log("hello");
  btn.onclick = null;
}

function sayGoodbye() {
  console.log("goodbye");
  btn.removeEventListener("click", sayGoodbye);
}
<button id="btn">Say hello and goodbye once</button>

另一种可能性是使用全局变量和if语句。不是最佳做法，但我相信值得一提：

var shouldSayHello = false;
var masterBtn = document.getElementById("master-btn");
var slaveBtn = document.getElementById("slave-btn");

masterBtn.onclick = unlock;
slaveBtn.onclick = sayHello;
slaveBtn.style.color = "gray";

function unlock() {
  shouldSayHello = true;
  slaveBtn.style.color = "black";
}

function sayHello() {
  if (shouldSayHello) {
    console.log("hello");
    shouldSayHello = false;
    slaveBtn.style.color = "gray";
  }
}
<button id="master-btn">Unlock</button>
<button id="slave-btn">Say hello once</button>

这一切最终回答了实际的问题。请注意，您必须使用cloneNode函数克隆隐藏的图像元素，以便将多个猫添加到画布中（我们只需要猫用于演示）：

var catBtn = document.getElementById("cat-btn");

catBtn.addEventListener("click", prepareCatLanding);

function prepareCatLanding() {
  var canvas = document.getElementById("canvas");
  document.body.style.backgroundColor = "red";
  canvas.addEventListener("mousedown", appendCat);
};

function appendCat() {
  var x = event.clientX;
  var y = event.clientY;
  var src = document.getElementById("catAppear");
  this.removeEventListener("mousedown", appendCat);
  pic = src.cloneNode();
  pic.id = '';
  pic.style.display = '';
  pic.style.position = 'absolute';
  pic.style.left = x - 50 + 'px';
  pic.style.top = y - 50 + 'px';
  src.parentNode.appendChild(pic);
  document.body.style.backgroundColor = 'blue';
}
<div id="container" class="container">
  <ul>
    <li><button id="cat-btn">cat</button></li>
  </ul>
  <div id="canvas" style="background-color: green; width: 300px; height: 300px;">
  </div>
  <div class="picture">
    <img alt="catAppear" id="catAppear" style="display: none; width: 100px; height: 100px;" src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?h=350&auto=compress&cs=tinysrgb" />
  </div>
</div>

我已经修复了HTML。实际上，<button><li></li></button>无效，因为<ul>只接受列表项，它应该是相反的，即<li><button></button></li>。此外，class "container"应为class="container"。

答案 3 :(得分：0)

您可以使用函数中的return;语句退出它们。

答案 4 :(得分：0)

您可以在添加图片后立即返回，根据自己的喜好添加条件，我不确定您的问题是什么。

if (some condition) return;

但在此之前：

class "container"以及更多不喜欢用HTML编写类的方法，正确的表示法是class="name"

答案 5 :(得分：0)

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

document.getElementById("canvas").onmousedown = null;

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

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

看看docs on MDN。但要注意浏览器兼容性表，“一次”选项不是广泛支持的。

答案 6 :(得分：-1)

尝试使用：

每个函数末尾的

break;或return;

相关问题
最新问题