Preventing ghost click when binding 'touchstart' and 'click'

jquery, mobile

Solution

If you want to do specific stuff for different event types use `e.type`

$('.button').on('touchstart click', function(e) {    
    e.preventDefault(); //prevent default behavior
    if(e.type == "touchstart") {
        // Handle touchstart event.
    } else if(e.type == "click") {
        // Handle click event.
    }
});

Problem

I'm developing an app, testing on my desktop and mobile. I am trying to fix these slow button presses on the mobile, and just learned about the difference between touchstart and click. So I bound my buttons with jquery to perform both touchstart and click like so: ``` $('.button').on('touchstart click', function(){ }); ``` Now the app is performing slightly better on the phone. However, it is performing a touch click, and then a regular click, ie potentially double clicks, or when the next slide comes in, it clicks on something there. In my case a form is appearing, and the input field that appears in the space where the button clicked was, is selected. Ghost click. How can I tell my function that if there is a touch, ignore the click? Or better yet, is there a way to tell jquery to just acknowledge all 'clicks' as touches? I would remove the 'click' binding, but then I can't exactly test in my desktop environment so easily.

Original source