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
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.
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(){});
I am working on a force directed graph using d3.js. I need to handle tap and double tap event on nodes for mobile devices. Mouseover and click functions need to replicated as tap and double tap in d3.js. I have managed to get a touch event working but have no clue on how to capture double tap event in a mobile device.
D3 has the touches event and using this you can get touch position coordinates from inside your event handler, but this doesn't give you any special handling for or help identify long press and doubletap. You can add support for long press and double tap yourself. For long press, have a look at this example:
Long Press in JavaScript?
If you're using jQuery, there are doubletap plugins like this one:
jQuery doubletap plugin
Unfortunately, there is no double tap in d3, so as suggested before, you got to work with touchstart. Here is how
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