Event by pressing the button

Asked

Viewed 349 times

0

Would there be any way to detect the touch pressed on a button? The code works normally on desktop, but when will I test in mobile does not act.

Use the Jquerymobile is not an option.

var timeout = 0;

$('button').mousedown(function() {
    timeout = setTimeout(menu_toggle, 2000);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout);
});

function menu_toggle() {
  alert('ok');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>pressionar</button>

javascript jquery

  • Why don’t you use the event click?

  • 1

    For mobile/touchscreen has a specific set of events: touchstart, touchend, touchmove, touchcancel.

  • Not just click, I need to press for a few seconds.

  • I edited my answer and tested on my mobile and works well.

5 answers

2

You will need timers, set one when mouse is pressed, clear it when mouse is released.

$( "#target" ).on({
mousedown: function() {
    $(this).data('timer', setTimeout(function() {
          foo();
    }, 4000));
},
mouseup: function() {
    clearTimeout( $(this).data('timer') );
}
});


function foo() {
//alert('Diego Vieira, obrigado por me pressionar por 4 segundos !')
 console.log('Diego Vieira, obrigado por me pressionar por 4 segundos !')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="target">Diego Vieira, pressione-me por 4 segundos</button>

0

Tries:

$('button').on('click touchstart', function() {

  • The idea is to press the button for a few seconds. With the non-pq click the event is triggered on time.

  • Is this timeout really necessary? I don’t know what you want to do exactly, of course, but sometimes the answer may be something else. Maybe call this menu_toggle function at some other event.. If you’re going to pick something up from a server it might be the event of success or error. What’s the goal?

  • The goal is to call the menu_toggle function when pressing your finger on the button for 2 seconds.

0

Try it like this, then:

<script type="text/javascript">
var timeout = 0;

$('button').mousedown(function() {
    timeout = setTimeout(menu_toggle, 2000);
});

function menu_toggle() {
  alert('ok');
  clearTimeout(timeout);
}
</script>

  • You can use the event click, touchstart...

0

Try this way, it can help you solve the problem, no dependency on libs. In this script was kept his initial idea how it would work, but written otherwise.

Two event listeners are added to the button, one that performs the function when the button is pressed 'mousedown' and another when the button is no longer being triggered by the user 'mouseup'. I hope it helps.

const button =  document.querySelector('#btn');

let timeout = 0;

const menu_toggle = function() {
  alert('ok');
};

button.addEventListener('mousedown', function(){
  timeout = setTimeout(menu_toggle, 2000);
}, false);

button.addEventListener('mouseup', function(){
  clearTimeout(timeout);
}, false);

0

Unfortunately none in the answers ended up working on mobile.

The only thing he solved was using the plugin Jquery Finger, which is made especially for this.

I’m leaving the link if someone goes through this same problem:

https://ngryman.sh/jquery.finger/

Browser other questions tagged javascript jquery

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