Create a custom event like 'click' for longtap

Question

I want to make a custom event which I can use like

$('.entry').on('click', function().......

I need it for detecting a longtap for mobile devices. I want to call it like this:

$('.entry').on('longtap', function().......

I read a lot about creating events but the most ways are with bind and trigger. So is there a way to do this?

i have a table with many rows. i want to fire if the user longtaps on a row so that i can select it. — Daniel Zenker, Jun 27 '19 at 06:24

score 2 · Answer 1 · answered Jun 27 '19 at 06:48

Here is a way to implement long tap:

var clickStart;

document.getElementById("cool_button").addEventListener('mousedown', function() {
  console.log('mouse down');
  this.clickStart = new Date().getTime();
});

document.getElementById("cool_button").addEventListener('mouseup', function() {
  console.log('mouse up');
  if ((new Date().getTime() - this.clickStart) >= 1000) {
    console.log('this is a long tap');
  }
});

<button id="cool_button">i'm a long tap button</button>

score 0 · Accepted Answer · answered Jun 27 '19 at 06:33

0

You may use one of the handmade solutions, provided here.
You may attach it as third-party script.
There is a special taphold event for jQuery Mobile.

answered Jun 27 '19 at 06:33

Alex Stulov

110
1
8

i cant use jquery mobile because it does many weird things to my frontend - also if i only use the js file without the css. i'll have a look to the third party script. it seems a good solution. – Daniel Zenker Jun 27 '19 at 06:37
i used the third party script which is very small and handy. i did some small modifications to fit my needs and so it works! Thanks to everyone! – Daniel Zenker Jun 27 '19 at 08:19
I'm glad this helped! – Alex Stulov Jun 27 '19 at 08:26

score 0 · Answer 3 · answered Jun 27 '19 at 06:34

As said here , you don't need to create a custom event for longtap, you only need js timer and two already exsiting events like mouseup, mousedown:

var pressTimer;

$(".entry").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() {
  console.log("hi!")
  },1000);
  return false; 
});

I made an example for you

https://jsfiddle.net/sOoN92/74rbc2ph/

Create a custom event like 'click' for longtap

3 Answers3