We Keep Coding

MouseMove Event Not Triggering in Chrome

I have added an event listener for mousemove that triggers a function. For some reason, it is not getting triggered in Chrome. I can tell because I'm writing to the console during testing. The keyup eventlistener and the scroll eventlistener both trigger, but the mousemove does not in Chrome. It works fine in Safari and FireFox. Here is my code:
document.body.addEventListener("mousemove", RenewTimeoutTime);
document.body.addEventListener("keyup", RenewTimeoutTime);
document.body.addEventListener("scroll", RenewTimeoutTime);
And the function it triggers:
function RenewTimeoutTime(){
var pageName = window.location.href;
var currentTime = new Date();
localStorage.setItem("inTimeout", false);
localStorage.setItem("AI_Timeout_Time", currentTime.getTime() + 270000;
console.log(localStorage.getItem("AI_Timeout_Time"));
}

It does work, you just have to check if the DOM is loaded first.
Replace the current script with
<script>
document.addEventListener('DOMContentLoaded', addListen, false); //this is the important bit
function addListen(){
document.body.addEventListener("keyup", RenewTimeoutTime);
document.body.addEventListener("scroll", RenewTimeoutTime);
document.body.addEventListener("mousemove", RenewTimeoutTime);
}
function RenewTimeoutTime(){
var pageName = window.location.href;
var currentTime = new Date();
var time = currentTime.getTime(); //i replaced the time just to be neat
localStorage.setItem("inTimeout", false);
localStorage.setItem("AI_Timeout_Time", time + 270000);
console.log(localStorage.getItem("AI_Timeout_Time"));
}
</script>
Then you should be good to go. Live here

The issue seems to be that "mousemove" events are fired infrequently (only on canvas clicks) when the console is open. If the console is closed, they are fired continuously, when the mouse is moved around the screen.

I know this is an old post but I ran into the same issue mentioned and realized what was causing the issue in my case.
If you are using Chrome's developer tools and have the Device Toolbar toggled on, the console will not log the mousemove events if the console is open. If you close the console while the Device Toolbar is toggled on and move your mouse, the mousemove events will log.
If you toggle the Device Toobar off, you should see the events logging in the console.
The shortcut for toggling the Device Toolbar on a Windows PC is Control + Shift + M. I imagine it's Command + Shift + M on a Mac but don't quote me.
enter image description here

turn off the device toolbar, upper left side of the chrome devtool, ctrl+shift+m

Thank you all for your input. I didn't post the HTML because I didn't think it was necessary. The web app is quite involved so I left it out. Long story short, if I watch the console while I move the mouse, the mouse movement doesn't get logged in the console. Clicking will trigger the mousemove event, and the scroll and keyup events do log in the console, but the mousemove does not. I found out by closing the console, moving my mouse around, and then viewing the console. Voila! The mousemove was logged.
I changed my code for easier debugging just during testing.
window.addEventListener("mousemove", function(){console.log("mouse move");});
window.addEventListener("keyup", function(){console.log("keyup");});
window.addEventListener("scroll", function(){console.log("scroll");});
If anyone knows why the console would not log the mousemove while I'm using the developer tools, please let me know.

Disable taphold default event, cross device

I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.

I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });

For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}

Why do I get an entry into the dblclick handler when double click was not issued?

I have JSFiddle with a resizable box. When double-clicking anywhere on the document, the box color toggles between beige and red.
The problem is that sometimes when releasing the left mouse button after resizing the box, a dblclick event is generated and the box turns red. And sometimes you can release the mouse button without changing the box color, but then if you click just once in the box it generates the dblclick and changes the box color.
Usually, everything works fine: I resize and there's no dblclick entry. I have to try maybe 20 times to get a false dblclick event.
I'm using Chrome.
I could partially fix this particular instance of the problem by adding code to the dblclick handler to ignore the entry if a resize is in progress. That still doesn't fix the dblclick entry, though, that happens (very rarely) when I resize , get no dblclick, but then get a dblclik when I click just once in the box.
But rather than just get the JSFiddle here to work, what I'm looking for here is the reason this dblclick is generated. Am I using the dblclick event incorrectly? Is there a known bug with this event and perhaps a better solution? Is there some kind of switch bounce going on with the mouse button?
$(function() {
$("#box").resizable();
$(document).dblclick(function(e){
console.log("double-clicked on ", e.target);
$("#box").toggleClass("red");
});
});

It can be related to your hardware, I guess it is also affected by your system's "double click delay" setting.
Using Firefox, if I repeatedly click&drag with small, close motions, I do trigger the dblclick event, and I would say it is normal behaviour. I don't see dblclicks poping out of nowhere with 5 secs spaced clicks, though.
To help you track a possible cause for your bug, try to also log the mousedown and mouseup events :
$(document).mousedown(function(e){
console.log(" mousedown on ", e.target);
});
$(document).mouseup(function(e){
console.log(" mouseup on ", e.target);
});
fiddle

Try this code:
$('#test').dblclick(function(e){
if(!$(e.target).is('.ui-resizable-handle'))
$(this).toggleClass('selected');
}).resizable();
fiddle

I tested in chrome too and it works fine for me... It does not trigger if you click too close to a dbclick, like the event does not fire as it dosent recognize the dbclick as you clicking too fast. That's the best answer I can give. I have some problems with my mouse sometimes, if I dont click too hard it doesn't register a mouseclick... but my mouse is pretty old, not sure if your mouse works perfectly :P

You need to stop click handler for resize handles using stoppropagation.
Updated the jsfiddle and tested.
$(function() {
$("#box").resizable();
$(".ui-resizable-handle").dblclick(function(ev){
ev.stopPropagation();
})
$(document).dblclick(function(e){
console.log("double-clicked on ", e.target);
$("#box").toggleClass("red");
});
});

javascript: events outside of a window

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.

Chrome: Potential onmousemove Bug

I ran into an issue that may be a bug in Chrome, but I was hoping some more seasoned developers could take a look at the problem. I'm using the dom-drag JavaScript library by youngpup (https://github.com/aboodman/dom-drag/blob/gh-pages/dom-drag.js) and noticed that it's not functioning correctly in Chrome. The error is occurring on line 86.
For some reason Chrome is registering a document.onmousemove event even if the mouse has not been moved. I've tried it on every other browser and Chrome is the only one causing the the event to be triggered when a user single clicks. Would this be considered a bug and if so, could anyone recommend a workaround to resolve the issue?

I was using drag.js, and I faced the same problem. I can see that from the link that PlantTheldea gave 2 years ago, chrome didn't fixed it.
In my side, I had draggable items in my DOM that should accept the click event handler. But onmousemove event was triggered during click event if the mouse was not moving. This bug was happening with Chrome.
So I suppose that other people may face the same issue. Here is how I solved it with drag.js:
1 - Go to your onmousemove handler
2 - Check if there are movement in X or Y. If there is any movement then you return true.
Example with the handler of drag.js that I edited:
// onmousemove handler for the document level
// activated after left mouse button is pressed on draggable element
handler_onmousemove = function (e) {
if(e.movementX === 0 && e.movementY == 0){
// No movement detected
return true; // We can continue with other handlers as click
}
Hope it can help.