Long click with Javascript

Asked

Viewed 145 times

5

In Android there is the method OnLongClickListener in which it is possible to hold down the finger in a View and an action is fired (if the developer sets an action) if that click remains a little more than 1 second.

I have this small table below with 4 colors. In Javascript what would be the best way to do this "long click" action when keeping the cursor pressed in some color? For example display a alert 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>

javascript jquery

2 answers

7


You can use setTimeout() 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>

  • On this same ration line, it is possible to log the name of the color of the pressed item ?

  • @acklay by color name you mean the value of the property background-color?

  • The value of each item when holding the cursor above.

  • 1

    @acklay updated the answer. If click and hold on <td style="width: 24px; background-color: black;">&nbsp;</td>, you want to Log black, correct?

1

A modification to the code proposed above would be to 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>
      <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>

Browser other questions tagged javascript jquery

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