Two functions in the same javascript onclick event

Question

I have two functions that need to interact in the same DIV.

# ambientEdit(this);

Her job is to keeping DIV pressed for 3 seconds, open the screen of confirm() javascript, passing the ID.

# survey Start(this);

This function, when clicking only once in the DIV is forwarded to another screen passing some parameters.

Trying:

<div class="lista fade" onclick="ambienteEdit(this);vistoriaIniciar(this)">

vistoriaIniciar(), works, but the ambienteEdit() does not work. If I remove the vistoriaIniciar() the function ambienteEdit() works.

Question:

How to have both events in the same DIV?

Thank you.

function ambienteEdit(object) {
   let aID     = object.getElementsByClassName('aID')[0].value;

   let delay;
   document.addEventListener("mousedown", function() {
     delay = setTimeout(_ => confirm("Dialogo"), 3000)
   });

   document.addEventListener("mouseup", function() {
     clearTimeout(delay);
   });

   console.log(aID)
}



function vistoriaIniciar(object) {
  let aID     = object.getElementsByClassName('aID')[0].value;
  let aCodigo = object.getElementsByClassName('aCodigo')[0].value;
  let aNome   = object.getElementsByClassName('aNome')[0].value;

  window.location='vistoriaIniciar.html?codigo='+aCodigo+'&ambiente='+aNome+'&id_ambiente='+aID;
}

<div class="lista fade" onclick="ambienteEdit(this);vistoriaIniciar(this)">
  BLA BLA BLA
</div>

Answer 1

The event onclick will only be fired if you click and drop. With this, the document.addEventListener("mousedown"... will only be created if it happens at least once.

Call the function ambienteEdit in an event attribute onmousedown in the div:

<div class="lista fade" onclick="vistoriaIniciar(this)" onmousedown="ambienteEdit(this)">

And the function will be like this:

function ambienteEdit(object) {
   let aID     = object.getElementsByClassName('aID')[0].value;

   let delay = setTimeout(_ => confirm("Dialogo"), 3000)

   document.addEventListener("mouseup", function() {
     clearTimeout(delay);
   });

   console.log(aID)
}

Answer 2

You are making a redirect in the method vistoriaIniciar()

window.location='vistoriaIniciar.html?codigo='+aCodigo+'&ambiente='+aNome+'&id_ambiente='+aID;

And is waiting 3 seconds to run confirm in the method ambienteEdit()

What happens is that the redirect is happening before 3 seconds, so it seems that your method was not called, but it is simply waiting for the 3 seconds.

That’s why it works when you take vistoriaIniciar(), because there is no redirect.

To resolve do the following, move your method ambienteEdit for the page LOAD and remove it from the onclick of the div, it will look like this.

<script>

    window.onload = function load() {
         var div =  document.getElementById("onPressDiv");
        ambienteEdit(div);
    }

function ambienteEdit(object) {
   let aID     = object.getElementsByClassName('aID')[0].value;

   let delay;
   document.addEventListener("mousedown", function() {
     delay = setTimeout(_ => confirm("Dialogo"), 3000)
   });

   document.addEventListener("mouseup", function() {
     clearTimeout(delay);
   });

   console.log(aID)
}



function vistoriaIniciar(object) {
  let aID     = object.getElementsByClassName('aID')[0].value;
  let aCodigo = object.getElementsByClassName('aCodigo')[0].value;
  let aNome   = object.getElementsByClassName('aNome')[0].value;

  window.location='vistoriaIniciar.html?codigo='+aCodigo+'&ambiente='+aNome+'&id_ambiente='+aID;
}
   </script>

And your div.

<div class="lista fade" id="onPressDiv" onclick="vistoriaIniciar(this)">
            BLA BLA BLA
        </div>