Activate touch events on Chrome 71+ - javascript

I want to activate touch events on Chrome to facilitate the debugging of an app that uses touchstart and touchend events.
It seems this post is a bit outdated because I cannot get the Overrides menu when I go to the developer settings, not on Chrome nor on Chrome Developer. This is what I get on Chrome Dev 73:
I've searched thoroughly in the settings but no sight of this checkbox. I've seen no up-to-date tutorial to activate them. How can I do?
Thank you for your help.

Two methods in the devtools:
Press Escape to show the drawer at the bottom. Choose menu > Sensors. At the bottom, set Touch = Force enabled.
Turn on Device Toolbar (second button at the top). Choose menu > Add device type. Set it to either "Mobile" or "Desktop (touch)".
Both of these should enable touch events.

It should be a chrome flag. Type this address into the chrome URL bar:
chrome://flags/#touch-events
it should highlight the Touch Events API, after that just press the drop-down box and change it to enabled.

Related

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
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

Native tooltip of button not getting hidden after touch in IE Edge

I have a simple 'Cancel' button with the same tooltip (title) value, which closes using kendo method, inside Kendo popup. It works fine except in Microsoft Edge Browser, when touched. Post touch, the tooltip value doesn't goes away unless clicked anywhere else on the screen.
<input type="button" value="Cancel" title="Cancel" onclick="javascript:closeWindow();">
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with Telerik (the folk behind kendo) on their forums, they can probably help identify the issue specifically so that it can be fixed in the library.

How to test JavaScript based touch events without having any touch based screen / device?

How to test touch events without having any touch based screen / device?
I have Windows 7 PC and my monitor is not touch based.
You can use google chrome. Open console by pressing F12 or inspect any element, in right-bottom corner click on gear icon, then go to "overrides" where you can enable "Emulate touch events". Your mouse clicks will be like touches.
Notice: unbind/remove any pc's click events like onclick,onmousedown,.click and .ect because in this mode will works both of touch and click events.
If it's still actual, you can use this library to test touch events. It's used to test touch for Hammer.
One possible way is to install the Android SDK and use the browser in the emulator. I'd advise an Android 2.x image as emulation is a bit slow, especially the 3.x and 4.0 images.
Hammer.js library can simulate touch events on desktop devices.
http://eightmedia.github.com/hammer.js/

preventDefault blocks right-click menu in Firefox on Mac but not Windows

I have a web application in which I have hooked mouse up and mouse down events; I use them for selection and manipulation of the graphical language for which my application is an editor. To prevent the right-click/context menu supplied by Firefox from showing up, I've placed:
if (evt.preventDefault) {
evt.preventDefault();
}
at the top of each of my mouse up and mouse down event handlers. I don't want to return false; I actually want the event to propagate.
On the Mac, the right-click menu doesn't show up; this is what I expect. On Windows, however, it stubbornly appears, even though Firebug confirms that my call to "preventDefault" is occurring and likewise "defaultPrevented" gets set to true.
Any idea what gives? Has anyone else run across this problem? I'm running Firefox 6.0.2 on both the Mac and Windows.
[Update: more recent versions of Firefox yielded consistent results on Mac and Windows: the context menu failed to be suppressed on both platforms.]
Okay. After putting this aside and returning to it several times, I finally found the solution.
Attempting to deal with the appearance of the context menu in the various mouse listeners appears to be fundamentally flawed. Instead, thanks to code I found here, I was put on the scent of the contextmenu event. That event appears to be the right way to handle things, although the code actually posted on that site didn't do the trick — merely calling "stopPropagation" and returning false was insufficient.
The following worked for me:
element.addEventListener('contextmenu', function(evt) {
evt.preventDefault();
}, false);
This has been tested with Firefox 10.0 on a Mac and Firefox 9.0.1 and 10.0 on Windows 7.
This option is removed in Mozilla's 23rd version.
Go to Tools > Options.
Go to the Content tab.
Click Advanced button next to Enable JavaScript option.
Disable or replace context menus. Check this box and it will magically work again.
There is no way to get around this setting in JavaScript.

Force Chrome/Firefox into Full Screen?

I want to use chrome to display a full-screen html page for a presentation. You can set chrome to fullscreen mode, but it seems the only way to exit is moving the mouse to the top of the screen and clicking:
I don't want to disable the ability to exit full-screen, I just want to make it so the only way to exit is via pressing the ESC key, not the mouse position. That way basically browser "admin" are the only ones who can get out of the presentation. Is that possible in Firefox or Chrome? Could I write an extension for this if it's not possible?
Using my comment for an Answer:
Chrome implemented 'Kiosk Mode' in version 4.0.245.0. This is, essentially, a way to launch the browser in fullscreen mode with the Address Bar and Status Bar disabled. Some keyboard shortcuts (Fullscreen, for example) are also disabled.
On Windows: chrome.exe -kiosk http://yoursite.com/file.html
On everything else: chromium-browser --kiosk http://yoursite.com/file.html
Note: Use your 'exit program' keyboard combo to kill it.
For firefox, the add-on R-kiosk doea a similar job:
https://addons.mozilla.org/en-US/firefox/addon/r-kiosk/
I have used it before and it used to be pretty good for kiosk type applications. Haven't needed it in a while though.
To exit, you need to start firefox in safe mode and disable the add-on, which works very well for kiosk purposes.

Categories