I have a webapp running in Google Chrome Browser that runs fine on Windows 7 with a touchscreen, however on a Windows 8 tablet the touch events don't work in the same way.
It is much more sensitive to any movement of the touch which often results in a touchcancel event being fired instead of a touchend.
I'd like to map all touchcancel events to be a touchend. The app uses Hammer JS as I hoped it would cover situations like this. Does anybody have a method to fix this?
Got a much better experience on the events by changing the hammer defaults setting especially around the tap settings to make a larger threshold for a touch tap event which translates through to a touchend.
Related
I am in the middle of developing an html5 game. I have been using the mousedown and mouseup event handlers for touch events. I have recently been trying to migrate it to a phone emulator to see how it preforms on a device. I was wondering if I needed to rewrite all of my events that use mousedown and up to touchstart and touchend ect. events. The mousedown and mouseup listeners seem to be working fine while I play my game while the "Emulate touch screen" setting is on. In terms of performance is there a reason to use one over the other?
Yes, you should change to touch events. Although the mouse events also work on mobile browser, there is a well-known 300ms click delay on mobile device. Considering that you are developing HTML5 game, it's worthy for you to improve the performance.
There are some third party library such as jQuery Mobile which may help you to mask the event for easier development.
In a web application touch-version,
I'm converting mouse events to touch events.
mousedown=>touchstart,
mouseup=>touchend...
I also want to convert mouseover event.
Touch mouseover ? it is ansurd, the touchpad doesnt detect your finger in the air !
Not really, if you swipe your finger over an element, e.g. And you want the element to get bigger... for example.
Is there a touch event for such a behaviour (mouseover for touch) ?
Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.
That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
Visit the website and read the documentation.
Virtual mouse event by JQuery mobile
is quite welldone.
https://api.jquerymobile.com/vmouseover/
You should try trigger('click') on on('mouseover',function(){});
Using the JavaScript MouseWheel on OSX seems to be not useable for precise stepped scrolling.
Any idea how to fix this example for OSX:
http://jsfiddle.net/daslicht/Qbq4k/
The issue is that, on OSX multiple MouseWheel Events get dispatched.
I only need to touch the MouseWheel of my Logitech Anywhere MX Mouse
and 3 or more events get dispatched.
When I try to scroll the list with the Touchpad,
precise scrolling is impossible due to the excessive MouseWheel Events.
On Windows scolling the List, works like a charm,
since only ONE Event get dispatched on each MouseWheel Step
(even in hyperscrolling Mode of the Anywhere Mouse)
I have even tried to block the incoming events
or lower the threshhold but nothing worked as nice as on Windows:
http://jsfiddle.net/daslicht/Qbq4k/ //blocking events after the first incoming for n ms
How do you guys deal with the MouseWheel on OSX?
if(osx){
mouse=false; //?
}
In reading about the touchend event, it seem that the behavior is somewhat inconsistent across different devices. I simply want to know the best and simplest way to determine whether all touching has ceased. Do I understand correctly that I can't rely on event.touches being null or empty when this is the case because some devices will include the ended touch in that list? Do I understand correctly that I can't rely on changedTouches being the same length as touches when this is the case because some devices will exclude the ended touch from touches?
For now only OSX (ipad, iphone) support ongesturechange event on their browser. All the other events are supported in all devices, here are some of them and that is the way how to use them. To detect touch end you can use touchend even, it is the same over all devices and it will fires when all fingers are not in touch:
$(someel).bind('touchend',callback');
To detect touch support just use this
var touchy=("ontouchstart" in document.documentElement)?true:false;
Safari developers ipad guide has a good documentation on this.
UPDATE: In fact I was wrong, touchend fires every time a finger lifts up: here is an excellent pdf for you: http://www.albanx.com/programing/ajaxupload/uploaded/SafariJSRef.pdf look at page 21.
When doing multiple touches in UIWebview i am unable to get a touchstart when i do the following:
Put two fingers on the screen. (This fires gesturestart)
Keep one of the fingers still, and lift the other (This fires gesturesend)
Put the finger that was lifted on the screen again and don't move any of the fingers while doing this (Nothing fires - i would say touchstart and gesturestart should fire here).
Touchstart and gesturestart fires as soon as one of the fingers are moved.
It seems to me that this must be a bug in UIWebView, and that it should be reported?
Is there a possible workaround?
Since it is in UIWebView it is generally also in every iOS browser (safari).
you can see the issue here: http://porsager.com/uiwebviewbug (only for devices with touchevent)