We Keep Coding

pointerdown event in chrome makes all further events only accosiated with the current browser window

i have an application that runs two on two browser windows (in two screens) and node webkit helps me mange them both and let them have shared memory.
in the appication i have the ability to drag elements from one scren to the other (between the browsers). at first my idea was to listen to pointerdown event and when it triggers in its callback to start listening to pointermove and pointerup on the document of both windows. the was when i realized that chrome has some intresting behaviour when initiating a pointerdown.
from what it seems, after the pointerdown all the further events are happening only in the current browser, even when the pointer leaves its boundaries. for example the pointermove event will have negative clientX values when the pointer exists the screen from the left side, or it'll be way higher than the screen width when leaving the screen from the right.
i also tested some other events with regular chrome tabs, and with
monitorEvents(document, EVENT_NAME)
and the results where the same - without doing a pointer down both browsers where catching pointermove, pointerup and pointerenter events, but when doing a pointer down event on one of the windows it stopped getting all the poreviously mentioned events on the other window until a pointerup occured.
i even tried to cheat chrome by doing something like
let pointerDownCallback= (event) => {
curerntScreenDocument.dispatchEvent(new Event('pointerup'));
firstScreenDocument.on('pointerup', pointerUpcallback);
secondScreenDocument.on('pointerup', pointerUpcallback);
firstScreenDocument.on('pointermove', pointerMoveCallback);
secondScreenDocument.on('pointermove', pointerMoveCallback);
}
element.on('pointerdown', pointerDownCallback);
chrome got the pointerup event but it didnt stop the pointerdown behaviour.
i still have found a way to disable this kind of behaviour and i tried lots of things - playing with blur and focus and similar things.
for now what im doing is modifying the event that triggers in one screen to match the positions of the other screen and triggering a service that does the pointerup callback action in the correct screen.
let pointerUpcallback = (event) => {
// im getting the screen by using clienX and clientY of the event and by knowing the sizes of each screen;
let screen = getEventScreen(event)
if(screen !== pointerDownOriginScreen) {
// modify the event's positionb to match the correct screen
event.screenX = ....
event.screenY = ....
}
// get the service that will handle the pointerUp in the correct screen
let service = getServiceForScreen(screen)
service.handlePointerUp(screen);
}
i have a similar thing for the pointermove, also most of my oither actions are based on the positions that i get on the event and the correct screen that i know the event should happen in it.
this is a pretty dirrty wasy to handle this problem. so my question is - is there a way to handle this issue in a more elegant and natural way?
what im trying to achieve is making it possible to drag one element to different position including another chrome window (thats of course part of my application). to do that i implemented a custom drag behaviour in my system. the idea of this drag is to minimize the element that im starting to drag, and replace it with a smaller element that represents its heading (similar to the heading of a regular chrome tab, but without seeing the content of the tab). that heading should follow the mouse cursor (even when im switching screens) and when im releasing the drag the element should maximise to its original size and content.
i added a pointerdown event handler to the element that minimizes it, saves its content and adds move and up event listeners on the document of both the chrome windows.
the idea was that the heading will follow the cursor via the pointermove, evenwhen it moves to the other screen because now the one who will fire the event is the document of the other chrome window. same idea was for the pointerup events, so when the drag will end, i'll know in which screen it happened because he will fire the pointerup event.
but that isnt the case because chrome doesnt allow events to fire in another window once you have initiated a pointerdown event on your window. all the following events will only trigger for the origin window of the pointerdown event.
you can simulate that behaviour by opening 2 chrome windows and in the devtolls's console to write in both of the windows.
monitorEvents(documents, 'pointermove')
now when you'll move the cursor from one window to another, there will be pointermove events firing in each window's console. but when you'll click on one window and hold the pointer down and stat moving it around (over the other window too), you'll notice that the pointermove events fire only for the pointerdown event origin window. that is also the case for other events as well.

jQuery capture of scroll event on iPad or iPhone not consistent with web browsers

In the site I am building, there is an effect where the top navigation "unlocks" from being a fixed element when you scroll past a certain point. It works very smoothly on my computer. However, on iPad or iPhone, the scroll event, which looks like this:
$(window).on('scroll', function(){...});
...if you flick to scroll the screen, the scrolling happens automatically, and the event doesn't fire until the scrolling comes to a stop. If you move your finger to scroll, the event doesn't fire until you let go. In other words, it does not fire as you move (i.e., scroll) the screen.
Is there some way I can capture both the movement of the user's finger as the screen is scrolled, and also as the "inertia" movement is happening? If my script would run when those events happen, the screen should be updated along the way, and it should all happen smoothly like it does on my computer.
I assume this has something to do with iOs. I don't have an Android device to test with... not sure if it is also an issue there or not.
Would appreciate any advice.
Thank you!

you could try using the touchmove event instead for mobile users. that way the code runds when they move their finger instead of after they let go.
$(document).on('touchmove', function(){...});
more info here: https://developer.mozilla.org/en-US/docs/Web/Events/touchmove

Like intelligentbean said, you could use the "touchmove" event and listen to it, you could also use touchstart and touchend if you want to do anything special before or after the touch happened.
Also, the jQuery event is also available for touch events, but its not the event passed on the parameter of the listener function, but rather on one of its properties:
$(document).on('touchmove',function(e){
touchEvent = e.originalEvent.touches[0]; //this is your usual jQuery event, with its properties such as pageX and pageY properties
});

Getting coordinates of mouse when in the browser chrome

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.

Lock mouse cursor while dragging in Chrome

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.

How to detect when multitouch finger moves onto child element?

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: