Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2014
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    add a 'tap' event to a 'click' javascript

    H

    I've got this nice scroll to page thing happening in jquery/js but it's not working on a tablet. Is there a way to tell it to "target tap" on a tablet as well as "click"? Here is the relevant line of code ...

    $("a").click(function( event ) {
    etc etc
    }

    Any ideas?
    Greg

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,335
    Thanks
    13
    Thanked 348 Times in 344 Posts
    PHP Code:
    // not sure if this tap event is called "tap"
    $("a").on("click"handlerFn).on("tap"handlerFn); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The touch event for most devices has several components, the most prominent ones being called “touchstart” (when finger gets down on the device), “touchmove” (finger moves while being down on the device), and “touchend” (finger leaving the device). Microsoft has implemented a “Pointer Events” API that has – as far as I remember – been proposed to become a standard some time in future.

    So, to make complicated things simple, in jQuery you can use on('click touchend pointerup', function() {…}) and it will be executed on whatever device/browser supports it. Note, however, that the click and touch events are currently fired both, so in order to cancel a click event on a touch device you need to call event.preventDefault() on it.

  • #4
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I know this has been answered, but I like to use this code.

    Code:
    $('a').bind('touchstart',function(e){
         //your function here
    });
    It's best to use touchstart, touchmove, and touchend all together if you have any scrolling on your site or web app. Reason being is if you put your finger down just to scroll, touchstart will be initiated, so if you only have that alone, it will trigger.

    If you want to use pure Javascript.

    Code:
        element.addEventListener('touchstart', function(e){
    
         });
    For more tutorials on my please check out my youtube channel here

  • #5
    New Coder
    Join Date
    May 2014
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, thanks again.

    Now, I'll admit I'm diving in the deepend with Javascript, and its taking me a while to learn. I've read over my full code a few times, but I'm still getting lost in it. If somebody could help me where exactly to add the 'touchend' event, I'd be very grateful!

    Here is the full code ...
    Code:
    <script type="text/javascript">
        $(document).ready(function() {
      
               // scroll handler
              var scrollToAnchor = function( id ) {
            // grab the element to scroll to based on the name
            var elem = $("a[name='"+ id +"']");
            // if that didn't work, look for an element with our ID
            if ( typeof( elem.offset() ) === "undefined" ) {
              elem = $("#"+id);
        }
        // if the destination element exists
        if ( typeof( elem.offset() ) !== "undefined" ) {
          // do the scroll
          $('html, body').animate({
                  scrollTop: elem.offset().top
          }, 500 );
        }
      };
      // bind to click event
      
      $("a").click(function( event ) {
        // only do this if it's an anchor link
        if ( $(this).attr("href").match("#") ) {
          // cancel default event propagation
          event.preventDefault();
          // scroll to the location
          var href = $(this).attr('href').replace('#', '')
          scrollToAnchor( href );
        }
      });
      
        });
    </script>
    greg
    Last edited by VIPStephan; 06-13-2014 at 08:39 AM. Reason: added code BB tags

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Actually I can’t imagine why it wouldn’t work on touch devices because these typically also fire the click event on touch. But to answer your question:
    Change $("a").click(function( event ) { to $("a").on('click touchend', function( event ) {


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •