Detect User Mouse Moves Outside and Inside the Browser - javascript

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)

Related

Issue with mousedown and mouseup event handlers

I have a drag and drop functionality on a page. I have defined a mousedown, mousemove, and mouseup event handlers to do it. However, sometimes, in the browser (I haven't been able to narrow it down to one because it has happened on all of them at some point), when the user clicks (and lets go) on the object to drag, he is now dragging the object and has to click again (and let go) to release the object.
The intended functionality is for the user to click down and hold while dragging, letting go of the click only when he wants to release the object he is dragging. Is there something I can add inside the mousemove handler to check if the mousedown is still active?
It's old but it may still help you I guess. Otherwise just use jQueryUI Drag'n'Drop-Plugin.
JavaScript: Check if mouse button down?

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!

Javascript: tracking touch events without .preventDefault() call

I'd like to track fingers in whatever mobile browser, without canceling the default behavior (which would be page scroll).
So I'm doing the following:
document.addEventListener('touchmove', function (ev) {
// fingers position tracking ode
}, false);
Now, if I want to continuously track the touchmoves, I have to call ev.preventDefault() in that function, which also disables the scrolling of the page. If I don't invoke this, I'll only get one touchmove event fired after which I can move my finger however long I want, - no other touchmove events will follow (until I release my finger and start a new touch/move sequence again that is).
My question basically is: how do I continuously track the fingers on the screen (bound to browser 'window'), without interfering with default browser behavior. I want to believe it is possible somehow :)
Unfortunately, your best bet is to take over the scrolling your self. There is fortunately a plugin for that http://cubiq.org/dropbox/iscroll4/examples/simple/

Is it possible to generate a right click event using a character key in a browser in order to access the context menu?

This is something like simulating the mouse right click to a keyboard key in javascript so as to obtain the context menu and navigate through it to launch the console(Inspect Element).
What i am able to do is.. I can simulate the right click event but it does not generate the context menu on the keypress. When mouse right click is used, it shows the event phase as the bubbling phase whereas on the keypress it shows the event phase as the target phase. Can someone throw any light on this??
What you really want to do is call a function that initiates the (Firebug?) inspect element function. There is no standard javascript function to access the context menu, nor does it seem like a good idea for browsers to allow scripts in web pages access to it, though it might be an extension available in specific browsers for enterprise or controlled environment applications.
For completeness, you can dispatch a click event into the DOM with parameters to emulate a right mouse button click, but that will not open the context menu.

How to I detect if an onscroll event was programmatically generated?

I'd like to have a handler fire whenever the user scrolls, but I don't want it to happen when the browser scrolls on behalf of the user. For example, the document below scrolls itself as part of onload. This fires my onscroll handler, but I don't want it to. Even if I remove the onload, there's still a problem: if the user scrolls and then reloads the page, the handler fires upon reload. Again, I don't want that.
Can the handler detect who caused it to be fired?
<html>
<body onscroll="alert('scroll detected')"
onload="window.scrollBy(0, document.height)">
aaa<br/>bbb<br/>ccc<br/>ddd<br/>eee<br/>fff<br/>ggg<br/>hhh<br/>iii<br/>
jjj<br/>kkk<br/>lll<br/>mmm<br/>nnn<br/>ooo<br/>ppp<br/>qqq<br/>rrr<br/>
sss<br/>ttt<br/>uuu<br/>vvv<br/>www<br/>xxx<br/>yyy<br/>zzz
</body>
</html>
How about setting a (boolean) flag whenever you move the screen programmatically, and unsetting again, when the move is finished? Then your scroll-listener would first check against that flag, and make its actions based on that?
On examining the result of an action only (the document has been scrolled), you can't determine what cause the action.
Examining a change in state of certain properties before and after an action will help you in determining the cause of the action, assuming such relevant properties change differently depending on the cause of the change.
You should consider properties that may be relevant to the action of scrolling a document, and then consider how these properties may change:
as a result of a document being scrolled
when a person performs the scrolling
when a browser performs the scrolling
When a person scrolls a document they may:
hit a key (down arrow, up arrow, page down, page up, ctrl-end, ctrl-home)
move the pointer to the scrollbar, click around a bit, move away from the scrollbar
The following event pattern would indicate a person scrolling:
a scroll-relevant key is pressed OR the mouse moves off the browser canvas (on to the scrollbar)
the document scrolls
In the case of a browser performing the action, the document merely scrolls without any preceding relevant key or mouse event.
In observing what happens before a scroll event occurs, you should be able to determine if the action was initiated by a person. Whilst this certainly may be tricky to implement, the logic is sound.
In short: you can't
Although, doing something like this with the help of a javascript library such as Prototype would be very easy using custom events:
<script language="javascript">
document.observe('user:scrolling', function() { alert('yay!'); });
</script>
...
<body onscroll="document.fire('user:scrolling')">
How about adding the onscroll event during the document.onReady event, instead of inline on the body command? I think this should allow for the browser to scroll to the position, before you've added the onScroll event.
Another option is to add a setTimeout() to call a function to add the onscroll event a few hundred milliseconds after the document is completely rendered.

Categories