{"id":4177,"date":"2020-10-27T13:57:03","date_gmt":"2020-10-27T12:57:03","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=4177"},"modified":"2022-07-25T08:35:42","modified_gmt":"2022-07-25T07:35:42","slug":"javascript-detect-swipes-touch-mouse","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-detect-swipes-touch-mouse\/","title":{"rendered":"Javascript: detect swipes (touch + mouse)"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function getPosition(event) {\n    if (event.touches &amp;&amp; event.touches[0])\n        return { x: event.touches[0].clientX  || 0, y: event.touches[0].clientY  || 0 };\n    return { x: event.clientX || 0, y: event.clientY || 0 };\n}\n\nfunction getDiff(a, b) {\n    const aa = getPosition(a);\n    const bb = getPosition(b);\n    return { x: bb.x - aa.x, y: bb.y - aa.y };    \n}\n\nfunction detectSwipes(el) {\n    let firstMove = null;\n    let lastMove = null;\n\n    function start(event) {\n        firstMove = lastMove = event;\n    }\n\n    function move(event) {\n        lastMove = event;\n        if (firstMove &amp;&amp; lastMove) {\n            console.log('drag', getDiff(firstMove, lastMove))\n        }\n    }\n    function end(event) {\n        if (firstMove &amp;&amp; lastMove) {\n            const diff = getDiff(firstMove, lastMove);\n            const distX = Math.abs( diff.x );\n            const distY = Math.abs( diff.y );\n            if (distX > distY) {\/* most significant *\/\n                if ( diff.x > 0 ) { \/* left swipe *\/ \n                    console.log('swipe left', distX);\n                } else { \/* right swipe *\/\n                    console.log('swipe right', distX);\n                }                       \n            } else {\n                if ( diff.y > 0 ) { \/* up swipe *\/ \n                    console.log('swipe up', distY);\n                } else { \/* down swipe *\/\n                    console.log('swipe down', distY);\n                }                                                                 \n            }\n        }\n        firstMove = null;\n        lastMove = null;\n    }\n\n    el.addEventListener('mousedown', start, false);\n    el.addEventListener('mousemove', move, false);\n    el.addEventListener('mouseup', end, false);\n    el.addEventListener('touchstart', start, false);\n    el.addEventListener('touchmove', move, false);\n    el.addEventListener('touchend', end, false);\n}\n\nconst doc = document.documentElement;\ndoc.style.height = '100%';\ndoc.style.width = '100%';\ndoc.style.border = '3px solid red';\ndetectSwipes(doc);<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4,1],"tags":[],"class_list":["post-4177","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=4177"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4177\/revisions"}],"predecessor-version":[{"id":4181,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4177\/revisions\/4181"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=4177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=4177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=4177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}