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

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.

Related

IE11 shunting pointer events into touch events?

I've created a web application that works well with touch events and click events with their own respective handlers.
However, issues are encountered when moving to touch IE11. Touch works fine on other platforms. The mouse on IE11 works great. But if you use both a touch screen and IE11, then the touch events are wrapped as pointer events instead of touch events or click events.
Is there any way to just globally map pointer touch events to pre-defined touch events for the entire window/document? It seems that it is already doing this by default for click events in IE11...
I tried following code example as displayed here: JavaScript mapping touch events to mouse events
And ended up with:
if(window.PointerEvent)
{
...
document.onpointerdown = function(e){
var event = document.createEvent("TouchEvent");
...
}
...
}
However, IE errors at document.crateEvent("TouchEvent") claiming that it is "not supported." However, the TouchEvent object is documented in IE as being supported: https://msdn.microsoft.com/en-us/subscriptions/dn792856(v=vs.85)
as specified in http://www.w3.org/TR/touch-events/#list-of-touchevent-types
I've also tried changing it to
var event = document.createEvent("UIEvent");
which IE allows, but then does later not recognize
event.initTouchEvent(someParameters);
I'm starting to believe that IE11 doesn't support creation of touch events.
I've also seen talk about changing the .css files to include combinations of:
touch-action: none
ms-touch-action: none
pointer-events: none
but completely disabling touch tends to break the application in other ways that I was hoping to avoid.
Is there any way to fire touch events instead of Microsoft's pointer events?
I would say you're actually going about this the wrong way. There are several pollyfill libraries to map touch events to pointer events. HandJS and jQuery PEP are two well functioning examples. Given that the only modern browser that doesn't support pointer events at this time is Safari, that seems the better way to go (Who wants pointer events...).

Disable the firing of touchcancel in Android Browser

I am making a mobile website that uses JavaScript touch events. Things work fine in iOS Safari and Chrome for Android, but the stock Android Browser (version 4.1.2) is giving me trouble.
During a touch process, the touchstart and touchmove events are called as expected. However, one of the actions performed by the touchmove handler seems to trigger a premature touchcancel event. (I'm not sure whether this is significant, but the action that triggers the touchcancel is the modification of an SVG object's viewBox attribute.) If I comment out this action, the touch process proceeds normally (i.e., completion of touchmove through to touchend).
All of my touch handlers call the preventDefault() function, so the issue isn't the one that's described in this bug: https://code.google.com/p/android/issues/detail?id=19827.
I've read that there is a lot of inconsistency among browsers as to when touchcancel is called. The stock Android browser is the only one that is problematic for me.
Is there a workaround out there? For example, is there away I can completely disable the touchcancel event? Another idea I had was to have the touchcancel handler programmatically trigger another touchstart/touchmove event, but I didn't get very far with that. Any ideas would be appreciated.
I know it's a bit late but if someonee else is facing this issue, here's a small jQuery extension that explains how to deal with pointercancel and touchcancel events.
Basically, if you switch to pointer events you will be able to prevent pointercancel by simply using the touch-action CSS property with a value of none, as long as the browser has both features correctly implemented. (Android 5+, Chrome 55+, IE11, Edge, etc)
If you really must use the legacy touch events instead, you'll have to implement event.preventDefault() in your touchmove events and this will prevent touchcancel from firing, but it will also disable entirely the browser handling of any default action like a pan or click.
As a final note, I wouldn't use touch events + touch-action CSS rules because touch-action was only recently added, at the same that that Pointer Events. So while that combination may work in newer browsers, it will most certainly fail in older ones (by triggering touchcancel event unexpectedly).
Check the README from the jQuery extension I posted because it explains the implications of using either TouchEvent and PointerEvent interfaces.
If you are useing hammer.js, you can disable pointer-events (which cause problems like this), by adding:
delete window.PointerEvent;
in your index.html PRIOR to loading hammer.js, and it will ignore those events.
You can also set SUPPORT_POINTER_EVENTS = false; (line 384 of v2.0.8) to do the same thing.
Ideally the devs would add the ability to turn this off, but so goes the open source dilemma...
I think touchcansel is special event that triggers when user touched button in specific behavior.
Ex. User touch button, but didn't removed his finger from display on exactly that button, instead of this he could move it a bit to the left, and end his action there. In that case touchcancel would appear.
So if you don't want that action to fire, i think you have to remove all handlers that connected with that action in android browser.
$('selector').off('touchcancel'), of if it's delefated $('parent').undelegate('touchcancel','selector')
I don't think that there is problem with e.preventDefault(). Only may be if you click on a link, and page starts to reload. May be page is reloaded when you click on button? and you wait for some actions after page reloaded, you actually may not understand, that it happend.

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

onselectionchange Javascript event in webview

In my Android app I'm attaching a handler for the Javascript onselectionchange like this:
$(document).on('selectionchange',function(ev){
alert('Text has been selected');
});
This is supposed to be fired when the user selects something (like text) or the selection changes, however it is fired on tap. Does anyone know the reason of this behavior? (Something like this is working in iOS)
"onselectionchange" event is not a cross-browser feature.
AFAIK, it's only Trident (iexplore) and recent versions of webkit (and hence webview) that support text selection events.
That being said, could it be that the version of webkit present on the iOS you tested is more recent than your Android's version?
Also consider that though they both render with webkit, they use totally different javascript engines, hence potentially different behaviour.

Google Chrome touch events not firing

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

Categories