Run function 1x per click (Javascript)

Asked

Viewed 44 times

2

I have a button where his job is to mark one pixel on a div. However, after I click the button, in case I click several times on the image, it marks several pixels. How do I limit this marking to each click on the button?

<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};
}
javascript function onclick

  • It is correct that you want the button not to insert this pixel directly, but to allow the pixel to be inserted when clicking on the image?

  • My idea is that when clicking the button, the user has a 'balance' of one click on the image, to mark the pixel where you want. Only that the way the code is currently, from the click on the button, this 'balance' is infinite, is allowing you to click and mark the pixel every moment.

1 answer

1


When calling the function marcar() you are creating a Event Listener. It will always stay active unless you cancel it. That is, if you cancel it after firing it, and it will only be active again when you call the function marcar() again.

To cancel it, you must create an anonymous function for the addEventListener and use removeEventListener.

For example, I created the function evento() which will be called in the addEventListener. This function will have the same code as the anonymous function on addEventListener, and added at the end the code to remove the event, see:

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
}

And now the addEventListener will call the function evento():

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

This way, you will only be able to insert the div.pixel once each click on the button Insert Marking.

  • Perfect, thank you very much!

Browser other questions tagged javascript function onclick

You are not signed in. Login or sign up in order to post.