This isn't the same question as all the others. I'm already preventing Chrome from entering text selection mode while dragging. (Edit: I only want to lock the icon/appearance, not restrict location or movement, and only between mousedown and mouseup) The issue I would like to avoid is that Chrome changes the cursor while dragging, to whatever is under the cursor (i.e.-i-beam while over text input control, hand while over hyperlink, etc).
IE and FireFox/Moz support element.setCapture() which I call in the mousedown event, that "locks" those browsers to the element so that the mouse cursor stays to whatever the cursor of that element is.. very nice. Chrome does not support that function, or anything like it, that I know of.
By watching mousemove and mouseup events on the document object instead of the element that was clicked, I'm able to still get most of the setCapture() behavior, in that I can track mouse events that happen outside of the element, and even outside the browser window. However, I'm left with one issue still, the mouse cursor changing in Chrome.
I believe you're looking for the Pointer Control Lock API, a recently introduced way for users to control the user's input device (when allowed). The big use case is gaming.
Without a secure and supported API, allowing sites to take over user input controls would be pretty disastrous (i.e. clickjacking and forced malware downloads), so if you're looking to "lock" the cursor then this is likely to be your only option.
I usually place an element over everything else with the intended cursor on mouse down and remove it on mouse up. Far from the cleanest approach but it works for me.
Related
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.
I can retrieve the mouse coordinates just fine when actually on the web page document (event.clientX/Y), but as soon as the cursor creeps onto the browser chrome, coordinates stop being sent.
I highly doubt this is possible after researching it, but I thought I'd just throw it out there; Does anyone know of a way to retrieve the mouse coordinates when the cursor is over the browser chrome?
At the moment, I've had to resort to a hacky workaround, that predicts that the user is in that vicinity as A) their cursor was moving fast enough and the next movement would theoretically be on the browser chrome and B) mouse movement events are no longer coming through.
This may be the closest I can get through JS alone, but if you have any ideas I'd be very grateful. Just to be clear, I mean the area show in the below image.
Events are fired for the document. JavaScript is meant for DOM manipulation and events outside of the document context are outside of this scope. Consider writing a browser plugin for such.
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:
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.
I'm using css/js to change the class of an element which the pointer is hoving over. The class determines the custom cursor image.
Unfortunately, it seems as if the cursor does not update in Chrome unless I physically move the mouse. Unfortunately the app is primarily used through the keyboard, however the cursor image is pretty important.
Any way around this?
Thanks.
This is actually a documented bug in Chrome and Safari. See this question on StackOverflow:
Getting the browser cursor from "wait" to "auto" without the user moving the mouse
I think you're out of luck for now, sorry