{"id":116,"date":"2023-08-25T17:32:46","date_gmt":"2023-08-25T17:32:46","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=116"},"modified":"2023-08-25T17:32:46","modified_gmt":"2023-08-25T17:32:46","slug":"swipe","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/swipe\/","title":{"rendered":"swipe"},"content":{"rendered":"

\nswipe event<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Triggered when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration.<\/p>\n

  • jQuery( window ).on( "swipe", function( event ) { ... } )<\/h4><\/li><\/ul>\n
    \n\t\t

    Triggered when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration but these can be configured:\n\t\t\t

      \n\t\t\t\t
    • \n$.event.special.swipe.scrollSupressionThreshold<\/code> (default: 10px) – More than this horizontal displacement, and we will suppress scrolling.<\/li>\n\t\t\t\t
    • \n$.event.special.swipe.durationThreshold<\/code> (default: 1000ms) – More time than this, and it isn't a swipe.<\/li>\n\t\t\t\t
    • \n$.event.special.swipe.horizontalDistanceThreshold<\/code> (default: 30px) – Swipe horizontal displacement must be more than this.<\/li>\n\t\t\t\t
    • \n$.event.special.swipe.verticalDistanceThreshold<\/code> (default: 75px) – Swipe vertical displacement must be less than this.<\/li>\n\t\t\t<\/ul>\n\t\t<\/p>\n\t\t

      The swipe event can also be extend to add your own logic or functionality. The following methods can be extended:<\/p>\n\t\t

        \n\t\t\t
      • \n$.event.special.swipe.start<\/code> Default:\n
        \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
        \n\t\t\t\t\t\n\t\t\t\t\t\t
        1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        9<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
        		\n\t\t\t\t\t
        function<\/span>( event <\/span>) <\/span>{<\/code><\/div><\/div>
          var<\/span> data = event.originalEvent.touches ?<\/code><\/div><\/div>
              event.originalEvent.touches[ 0<\/span> ] : event;<\/code><\/div><\/div>
          return<\/span> {<\/code><\/div><\/div>
              time<\/span>: ( new<\/span> Date<\/span>() ).getTime(),<\/code><\/div><\/div>
              coords<\/span>: [ data.pageX, data.pageY ],<\/code><\/div><\/div>
              origin<\/span>: $( event.target )<\/code><\/div><\/div>
            };<\/code><\/div><\/div>
        }<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t\t
        This method recieves a touchstart event and returns an object of data about the starting location.<\/p>\n\t\t\t<\/li>\n\t\t\t
      • \n$.event.special.swipe.stop<\/code> Default:\n
        \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
        \n\t\t\t\t\t\n\t\t\t\t\t\t
        1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        8<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
        		\n\t\t\t\t\t
        function<\/span>( event <\/span>) <\/span>{<\/code><\/div><\/div>
          var<\/span> data = event.originalEvent.touches ?<\/code><\/div><\/div>
              event.originalEvent.touches[ 0<\/span> ] : event;<\/code><\/div><\/div>
          return<\/span> {<\/code><\/div><\/div>
              time<\/span>: ( new<\/span> Date<\/span>() ).getTime(),<\/code><\/div><\/div>
              coords<\/span>: [ data.pageX, data.pageY ]<\/code><\/div><\/div>
            };<\/code><\/div><\/div>
        }<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t\t
        This method recieves a touchend event and returns an object of data about the ending location.<\/p>\n\t\t\t<\/li>\n\t\t\t
      • \n$.event.special.swipe.handleSwipe<\/code> Default:\n
        \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
        \n\t\t\t\t\t\n\t\t\t\t\t\t
        1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        9<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
        		\n\t\t\t\t\t
        function<\/span>( start, stop <\/span>) <\/span>{<\/code><\/div><\/div>
          if<\/span> ( stop.time - start.time < $.event.special.swipe.durationThreshold &&<\/code><\/div><\/div>
            Math<\/span>.abs( start.coords[ 0<\/span> ] - stop.coords[ 0<\/span> ] ) > $.event.special.swipe.horizontalDistanceThreshold &&<\/code><\/div><\/div>
            Math<\/span>.abs( start.coords[ 1<\/span> ] - stop.coords[ 1<\/span> ] ) < $.event.special.swipe.verticalDistanceThreshold ) {<\/code><\/div><\/div>
         <\/code><\/div><\/div>
            start.origin.trigger( "swipe"<\/span> )<\/code><\/div><\/div>
              .trigger( start.coords[0<\/span>] > stop.coords[ 0<\/span> ] ? "swipeleft"<\/span> : "swiperight"<\/span> );<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
        }<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t\t
        This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.<\/p>\n\t\t\t<\/li>\n\t\t<\/ul>\n\t<\/div>\n
        Example:<\/h2><\/header>
        \n
        A simple example of the capturing and acting upon a swipe event<\/p>\n
        \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
        \n\t\t\t\t\t\n\t\t\t\t\t\t
        1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        59<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        60<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        61<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        62<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        63<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        64<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        65<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        66<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        67<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        68<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        69<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        70<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
        71<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
        		\n\t\t\t\t\t
        <!doctype html<\/span>><\/span><\/code><\/div><\/div>
        <html<\/span> lang<\/span>="en"<\/span>><\/span><\/code><\/div><\/div>
        <head<\/span>><\/span><\/code><\/div><\/div>
          <meta<\/span> charset<\/span>="utf-8"<\/span>><\/span><\/code><\/div><\/div>
          <meta<\/span> name<\/span>="viewport"<\/span> content<\/span>="width=device-width, initial-scale=1"<\/span>><\/span><\/code><\/div><\/div>
          <title<\/span>><\/span>swipe demo<\/title<\/span>><\/span><\/code><\/div><\/div>
          <link<\/span> rel<\/span>="stylesheet"<\/span> href<\/span>="\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.css"<\/span>><\/span><\/code><\/div><\/div>
          <script<\/span> src<\/span>="\/\/code.jquery.com\/jquery-1.9.1.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
          <script<\/span> src<\/span>="\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
          <style<\/span>><\/span><\/span><\/code><\/div><\/div>
          html<\/span>, body<\/span> { padding<\/span>: 0<\/span>; margin<\/span>: 0<\/span>; }<\/code><\/div><\/div>
          html<\/span>, .ui-mobile<\/span>, .ui-mobile<\/span> body<\/span> {<\/code><\/div><\/div>
            height<\/span>: 105px<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          .ui-mobile<\/span>, .ui-mobile<\/span> .ui-page<\/span> {<\/code><\/div><\/div>
            min-height<\/span>: 105px<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          #nav<\/span> {<\/code><\/div><\/div>
            font-size<\/span>: 200%<\/span>;<\/code><\/div><\/div>
            width<\/span>:17.1875em<\/span>;<\/code><\/div><\/div>
            margin<\/span>:17px<\/span> auto 0<\/span> auto;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          #nav<\/span> a<\/span> {<\/code><\/div><\/div>
            color<\/span>: #777<\/span>;<\/code><\/div><\/div>
            border<\/span>: 2px<\/span> solid #777<\/span>;<\/code><\/div><\/div>
            background-color<\/span>: #ccc<\/span>;<\/code><\/div><\/div>
            padding<\/span>: 0.2em<\/span> 0.6em<\/span>;<\/code><\/div><\/div>
            text-decoration<\/span>: none;<\/code><\/div><\/div>
            float<\/span>: left;<\/code><\/div><\/div>
            margin-right<\/span>: 0.3em<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          #nav<\/span> a<\/span>:hover<\/span> {<\/code><\/div><\/div>
            color<\/span>: #999<\/span>;<\/code><\/div><\/div>
            border-color<\/span>: #999<\/span>;<\/code><\/div><\/div>
            background<\/span>: #eee<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          #nav<\/span> a<\/span>.selected<\/span>,<\/code><\/div><\/div>
          #nav<\/span> a<\/span>.selected<\/span>:hover<\/span> {<\/code><\/div><\/div>
            color<\/span>: #0a0<\/span>;<\/code><\/div><\/div>
            border-color<\/span>: #0a0<\/span>;<\/code><\/div><\/div>
            background<\/span>: #afa<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          div<\/span>.box<\/span> {<\/code><\/div><\/div>
            width<\/span>: 30em<\/span>;<\/code><\/div><\/div>
            height<\/span>: 3em<\/span>;<\/code><\/div><\/div>
            background-color<\/span>: #108040<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          div<\/span>.box<\/span>.swipe<\/span> {<\/code><\/div><\/div>
            background-color<\/span>: #7ACEF4<\/span>;<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
          <\/style<\/span>><\/span><\/code><\/div><\/div>
        <\/head<\/span>><\/span><\/code><\/div><\/div>
        <body<\/span>><\/span><\/code><\/div><\/div>
         <\/code><\/div><\/div>
        <h3<\/span>><\/span>Swipe the green rectangle to change its color:<\/h3<\/span>><\/span><\/code><\/div><\/div>
        <div<\/span> class<\/span>="box"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/div><\/div>
         <\/code><\/div><\/div>
        <script<\/span>><\/span><\/span><\/code><\/div><\/div>
        $(function<\/span>(<\/span>)<\/span>{<\/code><\/div><\/div>
          \/\/ Bind the swipeHandler callback function to the swipe event on div.box<\/span><\/code><\/div><\/div>
          $( "div.box"<\/span> ).on( "swipe"<\/span>, swipeHandler );<\/code><\/div><\/div>
         <\/code><\/div><\/div>
          \/\/ Callback function references the event target and adds the 'swipe' class to it<\/span><\/code><\/div><\/div>
          function<\/span> swipeHandler<\/span>( event <\/span>)<\/span>{<\/code><\/div><\/div>
            $( event.target ).addClass( "swipe"<\/span> );<\/code><\/div><\/div>
          }<\/code><\/div><\/div>
        });<\/code><\/div><\/div>
        <\/script<\/span>><\/span><\/code><\/div><\/div>
         <\/code><\/div><\/div>
        <\/body<\/span>><\/span><\/code><\/div><\/div>
        <\/html<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
        Demo:<\/h4>\n
        <\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"
        Triggered when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-events"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/116\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}