[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"snippet-detect-horizontal-swipe":3,"snippets-surround-detect-horizontal-swipe":95},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"createdAt":10,"tags":11,"body":13,"_type":89,"_id":90,"_source":91,"_file":92,"_stem":93,"_extension":94},"/snippets/detect-horizontal-swipe","snippets",false,"","Detect Horizontal Swipe","Detect horizontal (left/right) swipe on mobile.","01/01/2021",[12],"javascript",{"type":14,"children":15,"toc":85},"root",[16,62,69],{"type":17,"tag":18,"props":19,"children":22},"element","div",{"className":20},[21],"c-code-wrapper",[23,26,49],{"type":24,"value":25},"text","\n  ",{"type":17,"tag":18,"props":27,"children":30},{"className":28},[29],"c-code-wrapper__header",[31,33,40,41,48],{"type":24,"value":32},"\n    ",{"type":17,"tag":18,"props":34,"children":37},{"className":35},[36],"c-code-wrapper__title",[38],{"type":24,"value":39},"Detect horizontal swipe",{"type":24,"value":32},{"type":17,"tag":18,"props":42,"children":45},{"className":43},[44],"c-code-wrapper__copy",[46],{"type":24,"value":47},"Copy",{"type":24,"value":25},{"type":17,"tag":50,"props":51,"children":56},"pre",{"className":52,"code":54,"filename":55,"language":55,"meta":7},[53],"language-js","// Detect horizontal swipe\n!(function detectHorizontalSwipe() {\n  let touchstartX = 0;\n  let touchendX = 0;\n\n  const body = document.querySelector(\"body\");\n\n  function handleGesture() {\n    if (touchendX \u003C touchstartX) alert(\"swiped left!\");\n    if (touchendX > touchstartX) alert(\"swiped right!\");\n  }\n\n  body.addEventListener(\"touchstart\", (e) => {\n    touchstartX = e.changedTouches[0].screenX;\n  });\n\n  body.addEventListener(\"touchend\", (e) => {\n    touchendX = e.changedTouches[0].screenX;\n    handleGesture();\n  });\n})();\n","js",[57],{"type":17,"tag":58,"props":59,"children":60},"code",{"__ignoreMap":7},[61],{"type":24,"value":54},{"type":17,"tag":63,"props":64,"children":66},"h2",{"id":65},"further-reading",[67],{"type":24,"value":68},"Further reading",{"type":17,"tag":70,"props":71,"children":72},"ul",{},[73],{"type":17,"tag":74,"props":75,"children":76},"li",{},[77],{"type":17,"tag":78,"props":79,"children":83},"a",{"href":80,"rel":81},"https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android",[82],"nofollow",[84],{"type":24,"value":80},{"title":7,"searchDepth":86,"depth":86,"links":87},2,[88],{"id":65,"depth":86,"text":68},"markdown","content:snippets:detect-horizontal-swipe.md","content","snippets/detect-horizontal-swipe.md","snippets/detect-horizontal-swipe","md",[96,99],{"_path":97,"title":98},"/snippets/show-all-non-native-window-properties","Get all non native window variables",{"_path":100,"title":101},"/snippets/style-placeholder-text","Style Placeholder Text",1788788972380]