jQuery Mobile Events finally launched!

I am pleased to say that after much procrastinating and beating around the bush, I have finally found time to sit down and completely re-write the jQuery mobile events I mentioned in my earlier post (see here for more information). Details of the events can be found after the jump.

Regular visitors will probably recall that some time ago I released a series of jQuery plugins bundled into a single file which allowed cross-device handling of events (i.e. touch and mouseclick formalisation). After some reason blog comments inspired me to progress the project further, I’m pleased to say that everything has now been completely re-written and the first alpha release can be found on my Github repository.

Here’s an outline of the events that I have provided:

  • tapstart
    Fired as soon as the user begins touching an element (or clicking, for desktop environments).
  • tapend
    Fired after the user releases their finger from the target element (or releases their mouse button on desktops).
  • tap
    This event is fired whenever the user taps and releases their finger on the target element. Caution should be observed when using this event in conjuction without tap events, especially doubletap. This event will be fired twice when doubletap is used, so it is recommended to use singletap in this case.
  • singletap
    Unlike tap this event is only triggered once we are certain the user has only tapped the target element a single time. This will not be triggered by doubletap or taphold, unlike tap. Since we need to run some tests to make sure the user isn’t double tapping or holding a tap on the target element, this event is fired with a short delay (currently of 500 milliseconds).
  • doubletap
    Triggered whenever the user double taps on the target element. The threshold (time between taps) is currently set at 500 milliseconds.
  • taphold
    This event is triggered whenever the user taps on the target element and leaves their finger on the element for at least 750 milliseconds.
  • swipe
    This is called whenever the user swipes their finger on the target element. It is not direction-dependent, and is fired regardless of the direction the user swiped.
  • swipeup
    Similar to swipe, except only called when the user swipes their finger in an upward direction on the target element (i.e. bottom to top)
  • swiperight
    Similar to swipe, but triggered only when the user swipes their finger left to right on the target element.
  • swipedown
    Similar to swipe, but triggered only when the user swipes their finger top to bottom on the target element.
  • swipeleft
    Similar to swipe, but triggered only when the user swipes their finger from right to left.
  • scrollstart
    Triggered as soon as scrolling begins on the target element.
  • scrollend
    Triggered as soon as scrolling is stopped on the target element.
  • orientationchange
    This event is triggered when the orientiation of the device is changed. Please note that it uses throttling for non-mobile devices, or devices which do not support the native orientationchange event. In the latter instance, a detection of the viewport size change occurs.

Please check out the repo over on GitHub, and don’t forget to fork me while you’re there. Feedback would certainly be most gratefully received.

Go to GitHub Repository

31 Comments

  1. Reply
    curious marc June 13, 2012

    aww, finally a set of mobile detection scripts -
    … thanks a lot!

    does “jQuery Mobile Events” allow
    to use the “doubletap” event
    like a .click() command?

    i would like to “fake” a double-tap-click
    on ipods/ipads
    without clicking a button/field/tag element itself
    but using a command such as the .click() command

    looking forward to any reply or helpful hint
    desperate
    marc (a jquery, ipad, iphone, … newbee
    <–
    hope you may accept my apologies for any
    misspelling or wrong definition )

  2. Reply
    Ben June 13, 2012

    Thanks for your comments, Marc. Yes, this library allows you to easily bind any of the events to jQuery objects using either .doubletap() or .live('doubletap');

    If you need any help using the features, feel free to drop me an email (ben.major88 [at] gmail [dot] com).

    Happy coding!

  3. Reply
    rock August 20, 2012

    I just want the double tap script from the .js file. Can you help me out. The scroll event written in your js are not smooth. I just need the double tap functionality script.
    Appreciate if you can help me out.

    • Reply
      Ben August 20, 2012

      Hi Rock,

      Thanks for your comments. I don’t really understand what you mean by the ‘scroll event written in my JS’… There is no scroll events in there, only native triggers for scrolling?

      I will separate out the double-tap functionality and send it across to you as a separate JS.

      Thanks again,
      Ben.

      • Reply
        rock August 20, 2012

        Actually after applying your .js file, the page scrolling is not smooth in my application. That is the reason i wanted only the double tap code.
        Thank you very much for your time and efforts.
        Highly appreciate your quick response.

        • Reply
          Ben August 22, 2012

          Hi Rock,
          Please check your inbox.
          Regards,
          Ben

      • Reply
        Ben August 20, 2012

        OK, thanks for clarification. As a side note, are you using native scrolling within the app (i.e. overflow: scroll), or WebKit’s touch overflow (i.e. -webkit-overflow-scrolling: touch;), or perhaps iScroll or Scrollability?

        • Reply
          rock August 20, 2012

          Hi Ben,

          Yes I am using native device scroll. I am not using any custom scrolling like iscroll. Let me know if you need any other information.
          Thank you.

          • rock August 21, 2012

            Waiting for custom js file from your end. Thank you.

      • Reply
        Vaughn September 30, 2012

        I’m interested in just the doubletap functionality as well. Could you email me a copy as well? Otherwise, I will just try to separate it out… perhaps less successfully :)

        Thanks!

        • Reply
          Ben October 1, 2012

          Thanks Vaughn, I’ve just sent you an email. :)

  4. Reply
    Tomm Huth September 5, 2012

    Tap seems to be triggered after most events, such as swipes. Am I missing something or wouldn’t it be an idea to only let one event through? Also the time limit of 500 sec seems to much for a tap.

    • Reply
      Ben September 6, 2012

      Thanks for your comments, Tomm. Unfortunately, we cannot only fire the tap event, since we need to be sure that the user isn’t double-tapping for example.

      I’m afraid that if you wish to combine the events (i.e. having doubletap), that you have to use the singletap event. Even Apple has the same problem, since the default click event in Mobile Safari is fired after a short delay for exactly the same reason.

      If you download the unminified source from Github (https://github.com/benmajor/jQuery-Mobile-Events), you can change the interval used for the singltap event (see line 34).

      Thanks for your interest in the library! And please feel free to ask any other questions. If you need assistance, my personal email address is benmajor88 [at] gmail[dot]com.

      • Reply
        Poonam November 1, 2012

        Hi Ben, I am using ‘singletap’ and ‘doubletap’ events on the same element which is an image. Code for your reference :
        $(document).ready(function() {
        $(‘#tapButton’).bind(‘singletap’, function(event){
        event.preventDefault();
        alert(‘You Tapped Me’);
        });
        $(‘#tapButton’).bind(‘doubletap’, function(event){
        event.preventDefault();
        alert(‘You Double Tapped Me’);
        });
        });

        The problem that I am facing is on Safari browser in iphone – when I single tap on the image it displays proper alert message, when I double tap on the image again proper alert message is displayed but after few milliseconds alert message for single tap is displayed. I guess the default ‘click’ event of iphone is getting fired. How do I disable it?
        The problem with Android phone is that when I tap or doubletap proper alert msgs are displayed but on doubletap it zooms the webpage which is the default functionality on android phones. I need to disable this default behavior too?
        Thanks for the help.

  5. Reply
    Ben November 1, 2012

    Poonam,

    Thanks for your message. Which version of iOS have you tried this on? I set up a quick jsFiddle to test the functionality (see here > http://jsfiddle.net/benmajor/kE5Ar/), and tested with iOS 5 + 6 and the code functioned as expected.

    To disable the default behaviour, you need to intercept the native events and handle them. For example, for click:

    $('#myEle').click(function(e) { e.preventDefault(); });

    Unfortunately, the only way to disable the default zooming on Android is to add the following meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    Hope that helps!
    Ben.

  6. Reply
    Stefano November 26, 2012

    Hi Ben, i would use your js for simulate double tap on div element,
    to active the zoom of safari browser on mobile desktop.
    It is possible? like

    Poof zoom

    doubletap left

    jQuery(“#right”).doubletap();

    • Reply
      Ben November 26, 2012

      Hi Stefano,

      Thanks for your comments. You can easily add in the feature to zoom an element when you double-tap it by using the CSS zoom attribute. For example:

      $(‘#myZoomElement’).doubletap(function() { $(this).css(‘zoom’, 1.5) });

      Please see the jsFiddle I’ve put together > http://jsfiddle.net/FjTNm/

      Thanks,
      Ben.

  7. Reply
    Stefano November 26, 2012

    Thank you Ben, but i was hoping to take advantage of the capabilities of the browser without css
    Thank again

    • Reply
      Ben November 26, 2012

      Do you mean the native zoom on iOS and other devices? If you’ve specified the user-scalable attribute in the meta as false, this isn’t possible unfortunately. The only solution is to use CSS.

  8. Reply
    Matus January 13, 2013

    Hello

    I’ve been trying to use this using $(“#window”).on(“tapend”,function() { $(“#text”).html(“tap ended”);}); on a scrollable div, as soon as scrolling starts tap end fires, I would like it to fire after I have removed finger from the screen – this is being tested on Nokia Lumia 920.

    • Reply
      Ben January 13, 2013

      Hello Matus,

      Thank you for your comments. It is a little difficult to debug without some samples. Do you think you might be able to share some code on jsFiddle, so that I can look into it?

      Regards,
      Ben.

  9. Reply
    Di January 17, 2013

    Hello
    I’m trying to use swipedown.
    My code is
    $(“.bar0″).live(‘swipedown’,function() {
    alert(‘test’);
    });
    and html

    but it’s not working.
    Where is the mistake.

    • Reply
      Ben January 17, 2013

      Could you put together a jsFiddle showing your sample? I tried the code above and it seems to work without a problem. You can see a demo of what I have put together here:
      http://jsfiddle.net/9J3Qw/2/

      As a side note, when I was putting the jsFiddle together, it transpires that the latest stable release of jQuery (1.9.0) breaks the library. I will look into this.

  10. Reply
    Di January 18, 2013

    10x Ben
    My mistake was with thresholds :)

  11. Reply
    Klemen Novak September 3, 2013

    Thank you very much, I had been waiting for this for a long time! Works like a charm, and I tried 4 other swipe libraries and they didn’t register on IOS. Weird :) )

  12. Reply
    harry December 23, 2013

    Hello im very interested in using your plugin However im having challenge

    how do i get event data say the direction or xAmount

    event.xAmount doesnt work nor does touchData.xAmount

    what am i diong wrong?

    • Reply
      Ben December 26, 2013

      Thanks. Can you send me a sample of your code and explain what you’d like to achieve?

      My email is: ben [dot] major88 [at] gmail.com

      Thanks,
      Ben.

  13. Reply
    stan January 31, 2014

    Hi,

    In this demo http://ben-major.co.uk/jquery-mobile-events/
    When I add another handler to window, document or body i’m getting taphold called on single click without holding.

    Add this handler with firebug
    $(“body”).taphold(function() { consoleLog(‘body “taphold” called’); });

    and you’ll get taphold exec on single tap

    “taphold” called 13:17:8
    “singletap” called 13:17:8
    “tap” called 13:17:8
    “tapend” called 13:17:8
    “tapstart” called 13:17:7
    Mobile Events library loaded.

    on double tap you get
    “taphold” called 13:18:49
    “taphold” called 13:18:49
    “doubletap” called 13:18:48
    “tap” called 13:18:48
    “tapend” called 13:18:48
    “tapstart” called 13:18:48
    “tap” called 13:18:48
    “tapend” called 13:18:48
    “tapstart” called 13:18:48
    Mobile Events library loaded.

    • Reply
      Ben February 3, 2014

      Looks like it’s because the events bound to other elements are propagating up the DOM.

  14. Reply
    Marco February 25, 2014

    Hi Ben, Thank you very much for your plug-in. Great job!
    I use your tapstart and tapend to add a class “tapped” to anchors and buttons. The problem is that when I tapstart a button and more my finger outside the button, it remains tapped.
    It would be useful to have a tapleave event such as mouseout.
    What do you this about it? Can you help me?

    An other problem is: while tapping a button in a scroll area, if I move the finger I’d like to prevent scrolling. How to do it with your events?

    Thanks in advance.

    • Reply
      Ben February 26, 2014

      Hi Marco,

      Thanks for your comments and kind words about the project. I am in the process of working on Version 2 of the library, which I hope will include a few new events. Among them, I will be adding tapleave and tapenter, so keep an eye on the GitHub repo for more information and news!

      With regard to your scroll issue, if you check the latest release, I’ve added a new event tapmove. I’d probably try to combine tapstart with tapmove and tapend. For example:

      If the user tapstart and then tapmove without tapend happening, remove use the e.preventDefault() method on the tapmove event.

      Hopefully that makes sense, but if not, let me know (perhaps via email) and I’ll put together a jsFiddle to demonstrate what I mean, and how you can achieve this. It’s certainly possible to prevent the scrolling when a user taps a button using this plugin, which is good news!

      Regards,
      Ben.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>