Long click with JavaScript

Navigation
5

On Android there is the OnLongClickListener method in which you can hold your finger on a View and an action is triggered (if the developer sets an action) if that click stays for a little over 1 second. p>

I have this small table below with 4 colors. In JavaScript what would be the best way to do this "long click" action while holding down the cursor in some color? For example, display a% color of% with the color pressed. 

<table>
   <tbody>
    <tr>
     <td style="width: 24px; background-color: black;">&nbsp;</td>
     <td><span>black</span> = "#000000"</td>
     <td style="width: 24px; background-color: green;">&nbsp;</td>
     <td><span>green</span> = "#008000"</td>
    </tr>
    <tr>
     <td style="width: 24px; background-color: silver;">&nbsp;</td>
     <td><span>silver</span> = "#C0C0C0"</td>
     <td style="width: 24px; background-color: lime;">&nbsp;</td>
     <td><span>lime</span> = "#00FF00"</td>
    </tr>    
   </tbody>
  </table>
    
asked by anonymous 19.06.2017 / 02:24

2 answers

6

You can use JavaScript setTimeout() . 

var timer;

$("td").mouseup(function(){
  clearTimeout(timer);
  // Limpa o timeout
  return false;
}).mousedown(function(){
  var elemento = this;
  // Seta o timeout
  timer = window.setTimeout(function() {
    // Funciona para <td> que definiu a propriedade backgroundColor
    console.log("Clique longo ativado. Cor do background: " + elemento.style.backgroundColor);
  }, 1000);
  return false; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><tr><tdstyle="width: 24px; background-color: black;">&nbsp;</td>
      <td><span>black</span> = "#000000"</td>
      <td style="width: 24px; background-color: green;">&nbsp;</td>
      <td><span>green</span> = "#008000"</td>
    </tr>
    <tr>
      <td style="width: 24px; background-color: silver;">&nbsp;</td>
      <td><span>silver</span> = "#C0C0C0"</td>
      <td style="width: 24px; background-color: lime;">&nbsp;</td>
      <td><span>lime</span> = "#00FF00"</td>
    </tr>    
  </tbody>
</table>
    
19.06.2017 / 02:31
1

A modification to the proposed code above would create the longclick event 

var timer;

$("td").mouseup(function(){
  clearTimeout(timer);
  // Limpa o timeout
  return false;
}).mousedown(function(){
  // Seta o timeout
  var clickedItem = this;
  timer = window.setTimeout(function() { $(clickedItem).trigger('longClick'); }, 1000);
  return false; 
});
$("td").on('longClick', longClickCallback);


var timer;

$("td").mouseup(function(){
  clearTimeout(timer);
  // Limpa o timeout
  return false;
}).mousedown(function(){
  // Seta o timeout
  timer = window.setTimeout(function() { console.log("Clique longo ativado."); }, 1000);
  return false; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><tr><tdstyle="width: 24px; background-color: black;">&nbsp;</td>
      <td><span>black</span> = "#000000"</td>
      <td style="width: 24px; background-color: green;">&nbsp;</td>
      <td><span>green</span> = "#008000"</td>
    </tr>
    <tr>
      <td style="width: 24px; background-color: silver;">&nbsp;</td>
      <td><span>silver</span> = "#C0C0C0"</td>
      <td style="width: 24px; background-color: lime;">&nbsp;</td>
      <td><span>lime</span> = "#00FF00"</td>
    </tr>    
  </tbody>
</table>
    
19.06.2017 / 21:06
How do I make a function wait for the $ http result? What is a 3rd Party and what is its importance for the development of traditional applications?