2

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};
}
2
  • É correto que queres que o botão não insira esse pixel diretamente, mas que permita o pixel ser inserido quando clicando na imagem?
    – Sergio
    Commented 4/09/2019 às 15:10
  • A minha ideia é de que ao clicar no botão, o usuário tenha um 'saldo' de um clique sobre a imagem, para marcar o pixel onde desejar. Só que da maneira que está o código atualmente, a partir do clique no botão, este 'saldo' está infinito, está permitindo que clique e marque o pixel todo momento. Commented 4/09/2019 às 15:35

1 Resposta 1

1

Ao chamar a função marcar() você está criando um event listener. Ele irá ficar sempre ativo a não ser que você o cancele. Ou seja, se você cancelá-lo após dispará-lo, e ele só voltará a ficar ativo quando você chamar a função marcar() novamente.

Para cancelá-lo, você deve criar uma função não-anônima para o addEventListener e usar removeEventListener.

Por exemplo, criei a função evento() que será chamada no addEventListener. Essa função terá o mesmo código da função anônima que tinha no addEventListener, e adicionei no final o código para remover o evento, veja:

function evento(){
   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;
   this.removeEventListener('click', evento); // remove o event listener
}

E agora o addEventListener irá chamar a função evento():

function marcar(){
   document.querySelector(".area-imagem").addEventListener("click", evento);
}

Desta forma, você só conseguirá inserir a div.pixel uma vez a cada clique no botão Inserir Marcação.

1
  • Perfeito, muito obrigado! Commented 4/09/2019 às 16:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .