How to detect when multitouch finger moves onto child element? - javascript

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:

Related

Detecting mouse click, move, and release (aka drag) without having to drag an object in html5

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/

Mobile Safari input focus leaves artifacts of elements in previous position

This issue is particularly difficult to explain...
In Mobile Safari (and not in Chrome on Android), when an input is focused and the view adjusts to put the input in the center of the screen, I've noticed that sometimes the elements that were previously there still have their touch events in place.
See the video below, in which I click slightly above the "apply" button, which ends up clicking on the "total price" header, which causes the dropdown to collapse. Obviously, that ghost touch event should not be there.
Basically, when I focus on the input, the screen moves as expected, but the touch events for the elements that were there before don;t move with them. If I touch in the same place that an element used to be, it triggers that event.
https://youtu.be/5tFNfnd5RO4
I know for sure that the event being triggered here is the one for the "total price" bar, because if I click slightly below it to the right, I can trigger the event for the "change" button.
Note that this doesn't happen consistently. I cannot replicate this 100% of the time, but I was able to capture it on video.
This is a known bug in iOS and they say they're going to fix it in the 11.3 release.
https://www.apple.com/newsroom/2018/01/apple-previews-ios-11-3/

Hybrid PC/Tablet website

What is the reliable approach to develop a website that is used on the computer that is a hybrid, in other words have both a mouse (or a touch pad) and a touch screen and can be used by a user in both ways at the same time.
Especially the question is how to deal with the mouse cursor, that must be seen when using a mouse and is distracting once the user uses her finger.
The goal is to develop a single page, not two separate pages, one for mouse and other for the touch. Style cursor = 'none' is killing the cursor over the specified elements completely, this is not desired.
I am not talking about scrolling or zooming, but about clickable/touchable divs/spans/images, that can react some how. For instance I have a table where each cell could be clicked to mark (change color). Same with buttons, once you touch the button with the finger, the mouse cursor will stay on top of it and distract.
HTML5 does support the concept of touch events, perhaps you can dynamically change behavior/style etc in javascript based on detected events (e.g. turn your page into touch mode "cursor = none" if you detect a touch event but switch back to mouse visible style if you detect mouse move events).
This is by no means completely reliable as touchevent implementation is browser (somewhat patchy support at that), OS and possibly hardware dependent. e.g. Older OSes might translate touch event into mouse click events or older browsers might not support OS's touch events and OS fallsback to mouse click events.
See Touch And Mouse for more info that might help you.

Is it possible to know if a real mouse is used on a device with touch features using javascript?

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.

Firefox flash wmode=opaque iframe problems

I have a html/flex app loaded in an iframe, and wmode is set to 'opaque'. I have 'mousemove' listener attached to the document of flex app and document of the parent. Once I mousedown in the flex part of iframe and move my mouse around, i can see the logs from the iframe. However, when I move the mouse around in the parent, i dont see logs from the parent. But, if I mousedown on the html part of the iframe, i can see logs from both iframe and parent.
Is there a workaround to this problem?
Same sort of bug is reported in Firefox 4/5, which breaks html part of it. Visit
https://bugzilla.mozilla.org/show_bug.cgi?id=625313
Any ideas on how to fix this?
It sounds like the flash window is doing a capture of the mouse events which is typical in drag/drop scenarios. If the flash code is attempting to track a drag, then it would need to be doing this capture. I wonder if there's a way you can configured the flash app/object to only get mouse clicks and not mouse drag events, thus letting the normal mouse events as you move with the mouse down flow to whatever object is under the mouse (event outside of the flash object). I know nothing about the Flash library, but in Google searches, I do see that it has .startDrag() and .stopDrag(). It sounds to me like you need to make sure that startDrag() is not getting called on mouse down.

Categories