javascript: events outside of a window - javascript

Is it possible to get a mouse event which is fired outside of a browser window? Or is it possible to check if the mouse is pressed when the mouse is moved over a window?

This is not possible, but from this sentence here -
Or is it possible to check if the mouse is pressed when the mouse is moved over a window
You can check when the page is being focused, so when someone switches back to your page tab.
window.onfocus = function() {
console.log('focus');
alert('focus'); // See note
};
Note - If you use alert in the onfocus event the alert will popup multiple times.
This only happens with alert and must be a bug somewhere, maybe someone can shed some light on it.
Demo

It is possible to see if the mouse is in the window or not. You could do this with a setInterval that checks every 300 ms or so to see if the mouse is in the window.
You could also use mouseout and mouseover events, assuming you can include jQuery.
$(document).mouseout(function(){
alert("Mouse not in window");
});
$(document).mouseover(function(){
alert("Mouse in window");
});
Picking up click events and other things outside the browser are not possible.

Related

Chrome right-click dialog swalllows mouse events

In Chrome the right-click dialog seems to swallow all mouse events. This means that you get mouse-down events without corresponding mouse-up events.
This includes every right-click, and any left-click where the right button is pressed before the left button is released (in which case you get two mouse-downs but no mouse-ups).
You can see the problem in action here (you may wish to mute your speakers) if you're curious.
I was just wondering if anyone knew of any workarounds for this? Using window.onmousedown instead of document.onmousedown doesn't fix the problem unfortunately.
You'll want to add a handler for the contextmenu event that cancels the opening of that menu.
See MDN for some details.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};

jquery detecting mouseup

I have a problem.
The code works fine in Firefox but in Chrome it messes up.
The code is rather basic.
There's a div with a background. Upon jquery's mousedown upon that div I set a function to run at an interval. Upon mouseup the interval is cleared. Simple, right?
So problem is this. Say the user right-clicks in Chrome and brings up the context menu. Or they drag the div. The mouseup event is no longer registered.
Any ideas?
I had an idea where I'd just get the status of the mouse button. But that seems to be impossible to do without a mouse even firing.
function mouseD(e){
mouseE = e;
timer = setInterval(scroller, 50);
$(document).mouseup(function(){
clearInterval(timer);
});
//mouseB = e.button;
//mouseW = e.which;
//console.log(e.button + " D " + e.which);
}
imgbox.mousedown(mouseD);
EDIT:
So I managed to solve the context menu and dragging problems by disallowing such acts. The user just can't do it anymore. But if the user right- and left-clicks at the same moment the mouseup never registers.
Check out this website: it goes into detail about Mouse Events with different browsers.
http://unixpapa.com/js/mouse.html

Detect tab/window activation in JavaScript

It seems that Google+ checks for notification updates when I activate the tab in Firefox
It'd show "0" every time I activate it, but change to a number of new notifications in a couple of seconds after that.
What's the mechanism allowing to tap into that event? Is there a specific DOM event for that? Or are they using something like onmouseover handler and just consider any kind of activity to be a sufficient indicator of tab activation?
Just a guess because I haven't all relevant browsers available for testing.
What about using the focus event on the window. Whenever a user clicks somewhere this is invoked but also on switching of tabs. To distinguish between a user's actions on the page and a user switching to the page you could check if the event's explicitOriginalTarget points to the window.
window.onfocus=function(event){
if(event.explicitOriginalTarget===window){
console.log('switched from tab');
}
}
There is Page visibility document, which describes document.onvisibilitychange event handler.
The usage
document.onvisibilitychange = function() {
console.log("Visibility of page has changed!");
};
Unfortunately there's no 100% accurate solution
onvisibilitychange correctly triggers on tab changes, but does not trigger on window changes (ALT+TAB) visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
window.onfocus triggers when the document becomes focused. This works as expected if the tab's focus is already inside the web page, then it correctly triggers when window or tab becomes focused.
But if you have the focus on the URL bar, or in the console, you are already "out of focus", and when you get out of the window or tab and return, you will remain "out of focus", so this event won't trigger until you click inside the page, or navigate into it through TAB key
You can test below how each event triggers (click inside the white iframe to test onfocus/onblur events)
window.onfocus = () => console.log("focus");
window.onblur = () => console.log("out of focus");
document.onvisibilitychange = () => console.log("visibilityState: ", document.visibilityState);

How to determine if a user is actually looking at a web page?

Is it possible to determine whether a user is active on the current web page or, say, focused on a different tab or window?
It seems that if you switch tabs, any JavaScript set on a timeout/interval continues running. It would be nice to be able to 'pause' the events when the user is not on the page.
Would something like attaching a mouseover event to the body work, or would that be too resource-intensive?
You can place onfocus/onblur events on the window.
There's wide support for those events on the window.
Example: http://jsfiddle.net/xaTt4/
window.onfocus = function() {
// do something when this window object gets focus.
};
window.onblur = function() {
// do something when this window object loses focus.
};
Open Web Analytics (and perhaps some other tracking tools) has action tracking
You could keep an alive variable going using mousemove events (assuming the user does not leave the mouse still on the page). When this variable (a timestamp likely) has not been updated in x seconds, you could say the page is not active and pause any script.
As long as you do not do a lot of processing in the body event handler you should be okay. It should just update the variable, and then have a script poll it at a certain interval to do the processing/checks (say every 1000ms).
Attach listeners to mousemove, keyup and scroll to the document.
I use this throttle/debounce function (which works without jQuery, even though it's a jQuery plugin if jQuery is present) to only run code in response to them once in ~250ms, so that you're not firing some code on every pixel of the mouse moving.
You can also use the visibilityState of the document:
document.addEventListener("visibilitychange", function() {
if( document.visibilityState === 'visible' ) {
// Do your thing
}
});
There is a wide acceptance of this API.

What can be causing this simple focus listener to do not work?

function appFocus() {
write("FOCUSED"); // write on the screen
}
appWin.addEventListener("focus", appFocus, false);
// appWin is my window
This same code works well with other windows
other listeners works well with this window
so, why specifically the focus event does not work with just this window? Please, share your thoughts.
Found it:
I have a window with an "onload" that focus the browser within the window. By removing this onload I get the "onfocus" event to work.

Categories