5

No Android existe o método OnLongClickListener no qual é possível manter pressionado o dedo em uma View e é disparada uma ação (se o desenvolvedor definir uma ação) caso esse clique permaneça um pouco mais de 1 segundo.

Tenho essa pequena tabela abaixo com 4 cores. No JavaScript qual seria melhor forma de fazer esta ação do "clique longo" ao manter o cursor pressionado em alguma cor? Por exemplo exibir um alert com a cor pressionada.

<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>

2 Respostas 2

7

Você pode utilizar setTimeout() do JavaScript.

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>
      <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>

4
  • Nessa mesma linha de raciocino, é possível logar o nome da cor do item ´pressionado ?
    – viana
    Commented 19/06/2017 às 1:03
  • @acklay por nome da cor você quer dizer o valor da propriedade background-color?
    – mercador
    Commented 20/06/2017 às 0:52
  • O valor de cada item ao segurar o cursor em cima.
    – viana
    Commented 20/06/2017 às 0:53
  • 1
    @acklay atualizei a resposta. Se clicar e segurar em <td style="width: 24px; background-color: black;">&nbsp;</td>, você quer que logue black, correto?
    – mercador
    Commented 20/06/2017 às 1:46
1

Uma modificação para o código proposto acima seria criar o evento longclick

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>
      <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>

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 .