RE: Last Call comments

It doesn’t but the fact that the ‘touch-action’ property exists doesn’t disable your right to call ‘preventDefault’ if you have a complex setup and that ‘touch-action’ doesn’t do the trick, it’s just a way to make your life easier in the 95% of the cases where you don’t need something complex.


Calling preventDefault() to cancel a touch event is a performance issue because the browser has to wait the end of the JavaScript code to know if it can scroll the page or not, causing a visible glitch in some cases. In most cases, using CSS will be sufficient to express your needs and won’t delay the browser decision to scroll the page.


For the rare cases where CSS won’t fit, feel free to use preventDefault, I’m sure it’s gonna suit your needs.




De : Brandon Wallace
Envoyé : ‎19‎ ‎mars‎ ‎2013 ‎18‎:‎34
À : Daniel Freedman, Константинов Сергей
Cc :
Objet : Re: Last Call comments

How does your solution solve Example 2?

Example 2 is: How do I prevent browser behavior if the pinch gesture occurs on one part of the canvas element, but allow browser behavior if the pinch gesture occurs on the another part of the same canvas element?



From: Daniel Freedman <>
To: Константинов Сергей <> 
Cc: "" <> 
Sent: Tuesday, March 19, 2013 12:21 PM
Subject: Re: Last Call comments

Example 1 is what `touch-action: pan-x` is for. System controlled scrolling in the X axis, with PointerEvents generated in the Y axis.
Example 2, you would place `touch-action: none` on the map and do nothing for the info window, which will pinch-zoom as platform dictated.

In both examples, the css is static, and therefore you don't have to call preventDefault on any event.

On Tue, Mar 19, 2013 at 2:24 AM, Константинов Сергей <> wrote:

> I've to disagree with you on this. CSS *is* a perfectly valid way to configure the browser behavior.

When you need to alter browser behavoir statically - maybe.

Example 1: Safari two-finger scroll. Our task is to prevent browser behavior (page scroll) on vertical scroll and not to prevent browser behavior (history back/forward) on horizontal scroll.
Example 2: we have a map and info window on it. Our task is to prevent browser behavior (page zoom) in favor of map zooming when the fingers are on map; and we want not to prevent the same behavior (page zoom) when fingers are on the info window. Both map and info window are rendered on canvas.

What we have to do? Dynamically change CSS properties? That's ridiculous. In Safari we can just call preventDefault on touchmove event.

Received on Tuesday, 19 March 2013 17:43:51 UTC