Tenho um botão em que a função dele é permitir marcar 1pixel sobre uma div. Porém, após eu clicar no botão, caso eu clicar várias vezes sobre a imagem, vai marcando vários pixels. Como faço para limitar essa marcação a cada clique no botão?
<div class="area-imagem">
<img src="<?= $img?>" alt="<?= $img?>" class="img-fluid">
</div>
<div class="area-opcoes">
<button type="button" id="marcar" class="btn btn-success" onclick="marcar()">Inserir Marcação</button>
<button type="button" id="desmarcar" class="btn btn-danger" onclick="desmarcar()">Desfazer Marcação</button>
</div>
Javascript:
function marcar(){
document.querySelector(".area-imagem").addEventListener("click", function(event){
var pos = handler(event);
var pixel = "<div class=\"pixel\" style=\"top: " + (pos.y - this.offsetTop) + "px; left: " + (pos.x - this.offsetLeft) + "px;\"></div>";
this.innerHTML = this.innerHTML + pixel;
});
}
function desmarcar(){
}
function handler(e) {
e = e || window.event;
var pageX = e.pageX;
var pageY = e.pageY;
// IE 8
if (pageX === undefined) {
pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return {x: pageX, y: pageY};
}