Search code examples
javascripthtmlgoogle-chromefirefoxstylus-pen

How can I disable flick behavior in a browser? (Chrome/Firefox)


Flicks are gestures that can be triggered with a stylus or finger to go back, forward, scroll down or up in an app in windows.

http://windows.microsoft.com/en-us/windows7/what-are-flicks

In my web app, I am using an HTML5 canvas to capture mouse events to draw. In a Microsoft Surface (where flicks are enabled), because of flicks, the mousedown event is delayed and several mousemoves plain ignored and not transferred to the web app. Furthermore, sometimes, the user goes back/forward/scrolls up/down because of the flick actions.

Here's a repro/description/screenshot of this issue: https://github.com/jogonzal/MinimalisticFlickDelayRepro


Solution

  • The fix is to disable flick gestures in Chrome or Firefox - this means a code change in Firefox/Chrome windows apps to either:

    • Turn this off completely (preferred, this is what IE and Edge do)
    • Allow the developer to turn this off via CSS/Javascript

    Option 1 Use TABLET_DISABLE_FLICKS (recommended, plenty of examples on github, this is how IE and Edge do it)

    (C++): Disable flicks as described in this article: https://msdn.microsoft.com/en-us/library/dd562171(v=VS.85).aspx Code sample https://github.com/jonathanhook/Waves/blob/bc5a3c9a8a2c8574b28174e25650753237bc8cd2/Source/MultiTouchEvents/WMTouchEventSource.cpp

    (C#): Code example https://github.com/leowangzi/DanielLib/blob/6aaae88bd9ec9ae91da35fa3bdcd280f2c701e64/DanielLib.TouchAppTemplate/Touchtech.Surface.Community/TabletUtil.cs

    Option 2 Respond to WM_TABLET_QUERY_SYSTEM_GESTURE_STATUS

    https://msdn.microsoft.com/en-us/library/windows/desktop/ms699430(v=vs.85).aspx