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
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/
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 web site and I'am using modernizer to know if a device is touch compatible.
In this case, i filter all 'hover' of html tags of my application.
example : .no-touch div.cell:hover
But how can I know if the user also uses a real mouse on a touch device ?
More and more devices allow both and i want to display 'hover' on touch devices when a user prefers to use a mouse instead of (touch).
I'am using angularjs then a related solution should be great.
Thanks
Mouse events should trigger click events, whereas Touch events should trigger the touch events. However, let it be known now that some touch screens (typically older models) don't have "real" touch capability. All they do is take the touch input and convert it into clicks.
Also, I don't think the :hover attribute ever cares if it's mouse or touch. I think the only calculation that goes into that is whether or not the cursor is above the given element.
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
My implementation works great with a mouse where I can use a delegated jQuery on("mousemove","*") handler to detect when the user mouses over something and this triggers an action.
I want to do the same for multi-touch, if the user drags their finger across a child element I want a delegated touchmove handler to pick it up. However it seems like only the callback of the container element ever gets called as the finger is dragged around on that container (and over its child elements).
Is there some way I can accomplish this without writing a point-in-rect test using JS?
Fiddle here.
Notice how on a PC when you click-drag across the B DIV it gets turned red correctly.
On an iOS device (with debug console enabled) you can only get it to show up blue (by tapping inside the 'B' div). I want to be able to drag over something and "pick it up".
Behavior is also identical on a Nexus 7 Android 4.1.1 tablet with (Mobile) Chrome.
It would appear that a previous discussion provides an unsatisfactory but workable solution to my problem: