EDIT FOR CLARIFICATION:
What I want:
A full screen javascript canvas which can handle touch events without those events being further interpreted by the browser, but also reserve the ability to open a new window on user action.
Examples:
I should be able to swipe my finger around without the webpage trying to scroll
I should be able to swipe my finger around without the contents of the webpage being nudged in any way (normally, when one scrolls to the end of a scroll region, the browser allows some additional spring-loaded buffer scrolling to signal to the user that it is the end of the scroll region).
I should be able to pinch and pan without the webpage zooming
etc...
The point:
I need to interpret these events accurately and in realtime MYSELF to respond to these actions WITHIN THE CANVAS. (I am doing realtime drawing via requestAnimationFrame, allowing me to react to user events without using the DOM)
The state of things currently:
This all works perfectly (except for the ability to open a new window) because I position the canvas to be the full size of the viewport (handling any window resize events), and the canvas listens to ontouchstart, ontouchmove, ontouchend, etc... events, calling evt.preventDefault() after I have handled the user input myself. This works to ensure the canvas is ALWAYS full screen, doesn't budge, and user input is accurately given to me to handle in-game.
The Problem:
One bit of user input I need to handle is the launching of a webpage when they click the region of my canvas with a "launch my webpage" button. However, window.open(mywebpage) doesn't work, because mobile safari only allows such an action in the callstack of a click event. Because I rely on ontouchstart to get responsive controls, and evt.preventDefault() in an ontouchstart event CANCELS the click event from happening, I cannot launch the webpage (it gets blocked by the browser).
My attempted solutions, and why they are insufficient:
Just use a click event rather than ontouchstart: this means I can't prevent scrolling/etc... additionally, it is not as responsive, and doesn't allow me to handle touch-and-drag events well.
Overlay a div (or an a) tag atop the canvas over the launch webpage zone, and add a click event to that: if the user clicks-and-drags starting within this tag, then it allows the page to scroll and zoom. Trying to fix this results in the same problem as before.
ORIGINAL POST:
I have a mobile application that is a full-screen canvas, which locks itself positionally (can't scroll or zoom) so that I can correctly interpret user input uninterrupted (swipes, pans, etc...).
It locks itself in by intercepting touchstart events and calling evt.preventDefault (as well as the meta viewport no-zoom stuff which as far as I can tell doesn't actually do anything?).
This works great, and is absolutely necessary to make a game (or game-like application) function.
The problem is that I also have a "go to this webpage" button. I can intercept the touchstart, and use window.open(somewebpage), but mobile popup blockers will block it. The "rules" seem to be "the webpage will be allowed to be opened iff it is done in the call stack of a user interaction, AND that interaction is a 'click' event".
I have the first part down, but if I change the event to a click event, the web page now interprets swipes as scrolls (and pinches as zooms, etc...). If I have both a click and a touchstart event, then calling evt.preventDefault() on the touchstart (which stops the scroll/zoom) also stops the click event.
If I overlay a div atop the click zone of the "launch webpage" button, then the player can scroll/zoom when their input begins in that button, which results in an unpredictable and wonky experience.
How can I launch another webpage without allowing the current webpage to scroll?
Edit: at request, here is a code snippet at least partially illustrating what I'm trying to do https://jsfiddle.net/phildo/0q8e47fk/10/.
Note that in the "real" case, the canvas takes up the full width/height of the screen, and is explicitly set accordingly on screen resize.
Preventing bounces of any kind on mobile web page is a vast problem through out the mobile devices not depending about the manufacturer. I had similar issue on Windows Phone 8 app years ago and there (quite surprisingly) was a solution dedicated to Windows environment which of course cannot applied here.
For iOS you need an iOS solution, right?
The very solution is named iNoBounce. The idea is to add the little js library to your html page, code with some good conventions and the js lib will do the dirty job of preventing the default when necessary.
The trick it actually does is not to prevent just anything, but the ones only, that are "extra" and will cause the bounce events.
With the words of iNoBounce GitHub Readme:
iNoBounce detects if the browser supports -webkit-overflow-scrolling by checking for the property on a fresh CSSStyleDeclaration. If it does, iNoBounce will listen to touchmove and selectively preventDefault() on move events that don't occur on a child of an element with -webkit-overflow-scrolling: touch set. In addition, iNoBounce will preventDefault() when the user is attemping to scroll past the bounds of a scrollable element, preventing rubberbanding on the element itself (an unavoidable caveat).
The example code asks you to use the following parts (there is a separate example code for canvas, this is only the most common solution):
// All you need is an element with `height` or `max-height`, `overflow: auto` and `-webkit-overflow-scrolling: touch`.
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
Source:
[1] https://github.com/lazd/iNoBounce
Edit:
I found out you did not limit yourself to iOS. For other browsers, try
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
which introduces overscroll-behavior setting, that you can set to none to disable bounces.
It will work only on Android, not ie or iOS.
For mobile Windows Phone I had the solution like this:
div.wp8ScrollFix {
-ms-touch-action: none;
}
which effectively does the same as iNoBounce, now with single CSS line for the div containing the canvas.
Edit2:
For a search of semi universal solution, I could find that
-touch-action: none;
applied to div element that includes the canvas, you can disable default touch events and for the canvas, define your own.
The solution works on any other than Safari browsers. As in [3] there may be some variants like
-ms-touch-action: none;
but I suppose they are now all same without prefixes. The [3] solution is very old and world has changed a lot from those days.
The sad thing is, the browser support is same at least 2019 [4] and maybe now also.
Sources:
[3] jQuery / HTML5 / gwt app for WP8 (Lumia 920) device: vertical css scroll fix
[4] https://css-tricks.com/almanac/properties/t/touch-action/
Problem
Show a div on top of full screen canvas element that intercepts normal click events on element canvas.
Solution
Aside from click events, you need to intrrcept the following touch events:
touchstart
touchend
touchmove
touchcancel
Additional Info
You only preventDefault on the canvas events so you should still be able to create a clickable/touchable element in the canvas that shows a div outside the canvas positioned with a z-index higher than the canvas element by setting on display: block on the div. The div should also have 100vh and 100vw set foe width and height respectively and be position: fixed. The div should also have a button to hide again display: none.
References
https://stackoverflow.com/a/51127296/806876
In iOS Safari these days, the user can trigger a system BACK or FORWARD by swiping from the far left or right of the screen.
What I'm wondering is if there's a way to detect this condition (from JavaScript), while it's happening (as well as after the history navigation has occurred). That is, distinguish it from a swipe that is not causing system behaviors, and distinguish the end navigation from one triggered by a back button.
I see that there may have been a hacky way to detect whether the navigation on iOS7 was triggered by swipe or not (based on a bug about missing the touchend), but I'm not sure that method works anymore in iOS 9+. Also, it doesn't tell me during the swipe what is going on (I ideally need to suppress my touchmove handlers while the System is doing its thing...).
I'm using HammerJS to detect left swipes on touch screen devices. I'm trying to open a slide-out menu every time the user swipes left anywhere on the page when browsing on a touch-screen device. It works fine in portrait mode but not in landscape. I thought it might be because the direction might be changing from left to up/down, however the alert doesn't happen at all when the device is landscape. There is a fixed-position menu bar at the top of the page and it always works when swiping left on that, but not on the rest of the page. The same problem occurs on iOS Safari, and on Android Browser, Chrome, and Firefox.
I noticed on the HammerJS documentation it says "When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures." (http://hammerjs.github.io/recognizer-pan/). Could this be the cause of the problem? In landscape what were horizontal gestures become vertical? If so is there a workaround?
Any ideas? Thanks.
Hammer = require "hammerjs"
#body = new Hammer document.body
#body.on "panend", (e) =>
alert "panned!"
e.preventDefault()
if e.direction is Hammer.DIRECTION_LEFT
# open the menu
I've been researching how to prevent Safari's feature of swiping at the edge of the screen to navigate to previous/next pages in browser history. I have an application that uses Hammer.js to pan an image, and on mobile the image takes up the whole screen. So if the user happens to start panning at the left edge of the image, for example, it forgoes that by ignoring my little javascript app and instead going to the previous page. I haven't found anything saying it is actually possible to prevent this edge swipe feature...though I did find this: https://gist.github.com/mountainstorm/9430618. However, all it seemed to accomplish for me was breaking mouse scroll functionality.
Any help would be greatly appreciated. Thanks!
I don't think it can be done since it is an OS level feature. As long as the swipes initiate inside the web page, there should not be any issue. If you have sufficient margin from the edge, then it should not be a problem.
I'm developing a web application in Chrome on a Ubuntu touchscreen laptop.
Part of this application requires that the user be able to drag across an element while the application keeps track of the path the mouse makes across the element. This works fine for dragging with the mouse, however when I drag across the element with the touchscreen Chrome just scrolls the whole page.
I tried adding event.preventDefault() into my click() function, however this does not prevent the touch drag scrolling.
var drawing = false;
document.getElementById('canvas').addEventListener('click', function(event){click(event);});
document.getElementById('canvas').addEventListener('mousemove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchmove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchstart', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('mousedown', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('touchend', function(event){drawing=false;});
document.getElementById('canvas').addEventListener('mouseup', function(event){drawing=false;});
I need to be able to follow the path the user drags across the touchscreen, without it scrolling the whole page.