Google Chrome touch events not firing - javascript

I'm building a touchscreen kiosk using Chrome (7.0.536.2 dev) in kiosk
mode on a Windows 7 PC with multi-touch display.
I can see that the ontouchstart event is available (by inspecting the
window object in Webkit Web Inspector) but it never fires. If I write
the following code, the onclick event fires when I touch the screen
but the ontouchstart event doesn't.
window.onclick = function() { alert("click"); }
window.ontouchstart = function() { alert("touchstart"); }
In Firefox 4 the MozTouchDown event fires without any problems.
Are these events not yet available to JavaScript?

I experienced this when developing an iPad webapp and tried to test it in Chrome. It turned out, that Chrome recognizes those events, but does not fire them at the moment. This is a bit frustrating, since it breaks support detection in JavaScript.

There is a command-line switch to enable touch events, change your shortcut adding "chrome.exe --enable-touch". Unfortunately, if ('ontouchstart' in window) returns true then, event is never fired. Just tested this on a Windows7 touch-enabled tablet on canary channel. Disappointing... !

as of chrome 20, you can enable touch events from the "about://flags" internal experiments webpage
I did notice that this breaks fastClick, if you're using that - I was :)

Related

PinchZoom.js not working on iOS devices after 13.4 update by Apple

So I have run into a problem again with this plugin- PinchZoom.js which started happening after the 13.4 update by Apple for iOS devices.
The problem is that the double tap feature has suddenly stopped working completely on iOS devices now.
For a concrete test, you can refer to the plugin demo page: http://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html
On iOS devices, you won't be able to double tap to zoom in the image whereas this was working fine in previous versions of iOS.
I have even dived down in the source code of the plugin but I am not sure what is causing the double tap TO NOT work in iOS devices after the update.
If anyone has any idea/workaround for this, it would be very helpful.
Thanks
On all browsers there used to be a delay of 300-350ms on touchstart events. Apparently, on iOS there still is. You can test this by logging tap events and time in the touchstart event listener.
And for your issue, you could either solve it by modifying pinchzoom.js to use touchend which has no delay instead of touchstart, or by preventing default behaviour on the touchstart.
I chose the latter and added event.preventDefault() to the touchstart event listener. You can do that too, until the developer provides an official solution.
el.addEventListener('touchstart', function (event) {
event.preventDefault(); //add this
if (target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});

Difference between on('click') vs on('tapone')

Building a site with jQuery and jGestures and have noticed some devices such as iPads won't respond to the on 'click' event instead they respond to 'tapone'.
I replaced all instances of 'click' with 'tapone' and after testing in various browsers I have noticed no issues. Browsers include the latest versions of IE, Firefox, Chrome for Windows and Safari on Ipad 4.
What are the drawbacks to replacing all instances of: on('click', .... with: on('tapone', ...
Will this cause issues with any desktop browsers?
click is the native browser event.
tapone is a custom event triggered by the jGestures library to capture a one-finger tap. (It also has taptwo etc for multi-touch taps.)
If you are using the library, use its events. Seems like it normalizes to click on non-touch browsers which is why you don't see any issues.
From the documentation:
On every native touchstart, touchend, gesturestart and gestureend-event, jgestures triggers a corresponding custom event (jGestures.touchstart,jGestures.touchend,jGestures.gesturestart and jGestures.gestureend) on the event-element.

Changing touchevents to click events dynamically

I am working on a mobile app and have got lots of touch events on various elements. Unfortunately I cannot test my app on my pc browser as it does not support touchevents. Is there any way I can change all touch events to click events dynamically if I am running on a pc ( ofcourse by checking the useragent ) ?
Thanking you
You can emulate touch events in the chrome web developer tools:
Chrome Developer Tools support touch emulation. But it's not that comfort to use. So I just made a chrome extension for touch event emulation. It translate mousedown, mousemove, mouseup events to touchstart, touchmove, touchend. It actually simulate iphone5, so user agent also changed.
https://chrome.google.com/webstore/detail/touchphone-simulator/jijkpkhmnpbecppjhicgegndbbgfnngf

How to capture the hide keyboard event on iOS using JavaScript

I need to do some resizing of the content of a web page when the hide keyboard button is pressed on an iPad virtual keyboard. Which JavaScript event is launched when the keyboard is hidden?
You can use the focusout event. It's like blur, but bubbles. It will fire when the keyboard closes (but also in other cases, of course). In Safari and Chrome the event can only be registered with addEventListener, not with legacy methods. Here is an example I used to restore a Phonegap app after keyboard dismissal.
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
Without this snippet, the app container stayed in the up-scrolled position until page refresh.
Here is a good place to start List of supported Javascript events on iPad
which leads to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
which does not list it.
This one gives a work around iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
window.onblur = function(e) {
window.scrollTo(0, 1);
};
This is my solution, which works fine, if someone pressed the "closekeyboard" for iOS 14.7 .

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.

Categories