We Keep Coding

Detect User Mouse Moves Outside and Inside the Browser

I want to detect user if he is not using his computer by tracking mouse events? Do you know How can I achieve this using JQuery or Javascript?

Not sure tracking mouse movements outside the browser is possible. You track this type of thing by using event listeners and mounting the listener to an html element. in your case you would mount a mousemove listener to the window to track movement across the whole page. But outside of the browser window their is nothing that JS can mount an event listener to their for leaving no option to track mouse movement outside the browser. (could be wrong though, seems creepy if its possible)

How do I make onclick event skip to offclick?

I am making a virtual keyboard for a touchscreen computer. I am using angular, html, and css only. How do I make it so that when I touch a key, even if I am holding the key down, the click is forced to "lift the mouse up."
The reason I am asking this is because when touching 2 characters within 500ms-1000ms, it ends up not registering a click.
If you have any tips about improving touchscreen usability feel free to comment :)

Open this demo on a touch device to test: http://jsbin.com/nibohe/4/
To get a native app feel (touch / mouse) UX:
$keybKeyElement.on("touchstart mousedown", function( event ){
event.preventDefault();
// Capture the key
// Send character to textarea
// other stuff
});
If you use only the click event on a touchscreen you have to
wait user's ~300+ ms for the up movement
~400ms delay for the browser to make it a valid click event.
where touchstart end event.preventDefault will kill the click, mousedown or other events used on desktop (non/touch) machines.

You could try using onmouseup instead of onclick

Hack for `mouseup` outside of window in IE 7/8

I understand the event mouseup for the window just isn't there for IE 7 and 8. I was wondering if anybody has found a work-around for this or if that is even possible.
I am currently working on a project where the user can click, drag to draw a line, and if the user drags outside of the window and lets up on the mouse, the drawing transaction will be cancelled.

Your difficulty sounds like it would be more from the window losing the scope of the event.
Are you using jQuery? With jQuery you can also tag onto the mousemove event and use the "which" attribute to detect if the button is pressed. This even fires when you come back into the window. But it DOES NOT fire when you are outside of the window.
Alternatively you can use $(window).mouseleave to detect when it leaves the window. However once it has left the window you cannot detect further mouse events (that would be a horrible flaw if they could detect when you right clicked on your desktop etc).
So you are somewhat limited by the browser security implementations in ALL browsers and won't be able to bypass that... but you can add some work around events to provide a "similar" experience.

Not directly, but I believe this should work.
In your mousemove event, check the Event.buttons property. If it is zero, then the user must have released the mouse outside the window and you can cancel the drag.
I am checking the browser compatibility of this now, so this answer may be edited. My computer's being slow right now!

Cancel IE9 touch scroll event and invoke Mousemove, possible?

On a Windows 7 computer with IE9 and a multitouch screen, like an HP TouchSmart, if you touch the screen on a page that is tall enough to have a scrollbar and move your finger up or down the page scrolls. This doesn't seem to fire any mousemove event. If you touch the screen and initially move left or right instead of up and down it does fire the mousemouse events.
I wan't to cancel this scrolling and cause the browser to invoke a normal mousemove event. Is this possible?
EDIT: There does not appear to be touch events in IE9 Does IE9 support Touch events on Windows 7?
EDIT 2:
A couple other points of interest about this. First is that browsers often fire a mousewheel event when scrolling is triggered by a gesture, this can often be caught and cancelled. Second is that in this particular case, you can prevent the scrolling on IE9 with this hack $(document).bind('mousedown mouseup click dblclick', function (e) { }); which as hacks sometimes do, does not make any sense to me - it may be possible to use fewer event bindings but I didn't have good access to a device to easily test.

After spending some time testing the various methods to suppress default event responses, I have no idea how to suppress the scroll event. You should, however, be able to fire the mousemove event from within a scroll event handler.
window.onscroll = function(e){
element.onmousemove();
}
//jquery
$(window).scroll(function(e){ element.mousemove(); } );
A primitive example.
Two things I suppose you could try to prevent auto-scroll: setting the overflow (or overflow-y) to hidden on you body element or as part of your onscroll handler, attempting to scroll back to your point of origin. Setting body's overflow to hidden will prevent scrolling and hide the scrollbar, but I'm not sure it's what you want.

Try touch events instead of mouse events.

I had the same issue with iPad. I had to add an e.preventDefault(); to the touchmove event. I did this only to the div where I was tracking interaction, not to the whole page.
element.ontouchmove = function(e){ e.preventDefault(); };
No idea about your device, but might be worth a try.

onscroll event not being triggered on iPad after single touch panning?

In trying to figure out the scroll position for a UIWebView, I'm attaching a listener in the HTML that will call back to the main app. I attach the javascript listener like:
window.onscroll = function reportScroll() {
var sY = window.pageYOffset;
alert('Scroll pos: '+sY); // Would evetually trigger a URL or something
}
This event only seems to be triggered at the end of a flick scroll on OS 3.2 (iPad), once the deceleration has ended. However this: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 seems to indicate that it should be triggered at the end of a single finger pan as well. I really need to know when that pan completes as well.

According to QuirksMode Safari iPhone doesn't fire onscroll event on window, but rather on the document (and any other element). I would bet Safari iPad does the same thing.

I experienced the same problem in iPhone as well: flick scroll correctly produces the onscroll event, but single finger panning does not (I was using this in my fixed menu implementation, where the menu is hidden after ontouchstart event, and restored after onscroll).
I solved the problem by using two parallel events: onscroll and ontouchend. They both refer now to the same event handler (that restores the menu). As events are suppressed during scroll, the ontouchend event does not get fired if the window continues the flick scrolling. Now the event handling works for both flick scroll and panning.
I have not tested this in iPad, I would be interested in knowing if this fix helps in that as well.

In iOS Safari, the onscroll event should be fired only once at the end of the scroll (after deceleration). If you are simply taking your finger off of the screen, think of it as instant deceleration. So if you are performing a 'flick scroll', the onscroll event is still only fired once, at the very end of deceleration.
It sounds like you should also monitor the touchend event:
$(window).on('touchend', function() {
// Do something
});
Note: The touchend event will be fired for each finger that is lifted off the screen.