CODEWITHSUNDEEP
javascriptiosipadevents
enne87
enne87

Reputation: 2309

Detect double tap on ipad or iphone screen using javascript

I'd like to detect if a user has double tapped on an ipad or iphone.

Does a javascript-event exist which would provide this functionality?

Upvotes: 50

Views: 100198

Answers (10)

Đặng Quốc Trung
Đặng Quốc Trung

Reputation: 123

Might be late (Actually yup it's damn late), but the pure and easy JS solution for those lurking in the future:

var tapped="";
function dbtapper(elem=false,arg1, arg2, arg3, timer=1400){
    if(tapped==""){
        //Here is single tap

        tapped = setTimeout(function(){tapclean()}, timer)
        lastclick = elem;
        //variable lastclick is to prevent double clicking from happen
        //when clicking different object with double-click listener.

    } else if(lastclick==elem){
        //Here is double tap, if you want more (triple&beyond),
        //add doubletap/tripletap checker variable into tapclean().
        //and set it to true here!, example included.
        //you could also add more setTimeout to var-tapped so user will
        //have more time to do triple&up taps.

        tapclean();
        //doubletapped=true;
        mypersonalfunc(arg1, arg2, arg3);
    } else {
        tapped = setTimeout(function(){tapclean()}, timer);
        lastclick = elem;
}
}
function tapclean(){
    clearTimeout(tapped);
    tapped="";
    //doubletapper=false;
}

With this you can easily make single tap event, double, triple, fourth,... to infinity and beyond!
Notice: to use element checking, call the function like:
dbtapper(YOURELEMENT), ie: <span onclick="dbtapper(this)">Click Me</span>

It's not forced tho, you can use it without just fine (dbtapper()), but if you need to pass argument into the function make sure you type false for the first argument if you doesn't point it to the element.

Without element pointer: dbtapper(false,yourarguments)
With element pointer: dbtapper(document.getElement*******,yourarguments)
Alternatively, you can use an unique elem arg for each element:
                    dbtapper('omega',yourarg) or dbtapper(69,yourarg)
Though this is not recommended if you have a huge amount of double tapping elements.

Upvotes: 2

Abdullah
Abdullah

Reputation: 109

I found this solution on Stackoverflow somewhere but forgot what exact post. It works for a doubleclick on a browser and double tap on iPhone.

I use 'touchend click' to detect the double click on both browser and iPhone. To implement just on iPhone, remove the click.

var timeout;
var lastTap = 0;

$('element').on('touchend click',function(e){
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTap;        

    e.preventDefault();
    clearTimeout(timeout);

    if(tapLength < 500 && tapLength > 0){

        //Double Tap/Click

    }else{

        //Single Tap/Click

        timeout = setTimeout(function(){
            //Single Tap/Click code here

            clearTimeout(timeout); 
        }, 500);
    }
    lastTap = currentTime;
});

Upvotes: 11

Anulal S
Anulal S

Reputation: 6625

Detect Double Tap

try the following snippet on a touch device

event.preventDefault() will disable double tap zoom on div#double-tap

document.getElementById("double-tap").addEventListener("touchstart", tapHandler);

var tapedTwice = false;

function tapHandler(event) {
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
    alert('You tapped me Twice !!!');
 }
   
div#double-tap {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  background-color: lightblue;
  line-height: 50px;
  text-align: center;
  margin: 50px auto;  
}
<div id="double-tap">Double Tap Me !!!</div>

Upvotes: 29

Dr. Aaron Dishno
Dr. Aaron Dishno

Reputation: 1919

I created this one in JavaScript and it seems to work well. (I tested it on my iPad 2.) It is basically the code for what is said above.

var clickTimer = null;

function touchStart() {
    if (clickTimer == null) {
        clickTimer = setTimeout(function () {
            clickTimer = null;
            alert("single");

        }, 500)
    } else {
        clearTimeout(clickTimer);
        clickTimer = null;
        alert("double");

    }
}

Upvotes: 23

Attenzione
Attenzione

Reputation: 842

based on latest jquery docs, double tap implementation

https://gist.github.com/attenzione/7098476

Upvotes: 1

Adam
Adam

Reputation: 347

One basic idea is to do it like this:

  1. In order to create a double-tap (or double click) event you need to create code on the onClick event.

  2. The reason you most likely want double-tap/click is because you already have something attached to the onClick event and need a different gesture on the same element.

  3. This means that your onClick event should only launch the onClick event after a setTimeout() is acknowledged.

  4. So the basic code would launch the function attached to the onClick event using a setTimeout() command. The first click says "Start timer + run function using setTimeout() after say..500 milliseconds. The second time you clicked, you would check to see if the second click was inside a specific time frame in order to count as a double tap. So if the End time was less than 500 milliseconds, you would cancel the setTimeout() using clearTimeout() and then launch a completely different function (the function you wanted to launch for double tab/click)

  5. Stopping default action? - Probably somthing like stopPropagation() or cancelBubble() would do the trick. Honestly, I don't know but that's where I'd start researching.

Upvotes: 33

Jorge
Jorge

Reputation: 842

This could be used for a double tap or a double click. In pure javascript:

var mylatesttap;
function doubletap() {

   var now = new Date().getTime();
   var timesince = now - mylatesttap;
   if((timesince < 600) && (timesince > 0)){

    // double tap   

   }else{
            // too much time to be a doubletap
         }

   mylatesttap = new Date().getTime();

}

Upvotes: 42

ngryman
ngryman

Reputation: 7672

You could also use jquery.finger which supports delegated events.

Upvotes: 2

user1455009
user1455009

Reputation: 19

technoweenie's jquery.doubletap does and this link: jQuery mobile events finally launched seems to be able to solve the task ...

Upvotes: 1

Interrobang
Interrobang

Reputation: 17454

Double tap on an iPad is tricky because the browser, by default, absorbs this event as a "zoom" event, as seen here:

Doubletap - Apple API docs

However, if you cancel the default behavior, you can grab the doubletap yourself. Here's an example of a plugin that does this for you-- the jQuery doubletap plugin.

Upvotes: 7

Related Questions