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(){});
Related
I am writing a simple timetable application in HTML5. I want the user to be able to enter events (such as Concerts, Lectures, etc.), by clicking inside a div, then drag and release the mouse to control the duration of an event (similar to the calendar Application in mac os). I then insert another div of appropriate height representing the event into the first div. I accomplished this by listening for mousedown, mousemove, and mouseup events. Drag and drop wasn't an option, since there is no node being dragged. However, my solution does not work on mobile devices. I tried to implement the same functionality using ondragstart, ondrag, and ondragend, but I didn't even manage to get ondrag and ondragend to fire in firefox. What can i do to make this work on mobile devices?
TL;DR: How do I capture a mouse drag without a draggable object or drop zone on mobile devices?
to have that work on mobiles you need a "touch api"
https://developer.mozilla.org/en-US/docs/Web/API/Touch
added to the drag and drop api you alreadt use:
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
A detailed explanation of this is available here:
https://medium.com/#deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5
If you use the jquery there is a toutch patch for its drag and drop api shown here:
https://1stwebdesigner.com/chart-js-library/
I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well.
I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything works fine in Chrome on my laptop when I use mouse. However, when I try it out on my tablet, I'm only getting a few pointermove events (2-5) before getting pointercancel event followed by pointerout and pointerleave.
I guess the browser is triggering pointercancel, because moving my finger over the canvas triggers scrolling of the whole page as well.
To disable scrolling when using touch events, I'm calling event.preventDefault() in handlers for touchstart and touchmove events, but this solution doesn't seem to be working with pointer events.
How to disable scrolling of the whole page when I draw over the canvas element when using pointer events?
Have you tried the CSS property touch-action: none? It disables any kind of user-agent behavior (like scrolling) on an element.
For more fine grained options checkout the MDN article for touch-action.
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.
I have been looking for examples for using D3 on a mobile device with touch events instead of mouse events, but am struggling to find anything that maps what touch event replaces which mouse event for example, a click or dblclick. Thus, I have struggled to get started on "converting" my D3 visualizations to support touch.
I need appropriate touch events for:
Zooming (or will it work for both?):
var zoomed = d3.behavior.zoom().x(x).y(y).scaleExtent([scaleExtentMin, scaleExtentMax]).on("zoom", partitionZoom);
click
dblclick
So the main conversion I would need is click --> supported touch event.
How can I do this with D3? Or is there an alternative library that would work well with D3 that can handle the touch events?
Any help with this would be appreciated!
what ever event is supported by html containers is supported by svg. click and tap events are the same except for the 300ms delay. you can use hammer like previously suggested or just jquery mobile
I have problem with iPad. I use 3 function in JavaScript for anchor tag, onmouseover, onmouseout, onclick.
But when I test it on the iPad then for first touch it trigger onmouseover, and then it takes two another touch for execute onclick event.
That means it take total three touch for click event. Generally it has to take only two touch for it. Why is it so?
To fully support Mobile devices with their Touch Screens you can't use the mouse events... you need to change to touch events
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
Another way is to divide the code using a mobile Framework, like jQTouch, jQMobile, etc...
They support Mouse Events and Touch Events right out of the box.
After you make your code support for Touch Events, even Drag and Drop will work nicely
Drag and drop on iPad