Develop Reference

How to detect mouse scroll when the page doesn't actually scroll (because it's too small)

The scroll event does not capture the mouse "scroll" action, but rather captures the page scroll action.
This means that on pages too small to actually scroll, it's not possible to detect the user's scroll action (e.g. to translate it into a zoom action).
To see what I mean, compare the following two:
https://jsfiddle.net/r8aykcut/1/
https://jsfiddle.net/r8aykcut/2/
Is there a way to listen for the mouse scroll event without the page itself scrolling?

i think you can use wheel event.
The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated.
this is the reference link:
wheel event

you can use this listener
addEventListener("wheel", anyFunctionYouWant );
you must set this Listener in your which element , you want to zoom
for example if you have some thing like this
<div class="wraper">
<div>
<div id="ele" ></div>
</div>
</div>
set this Listener for .wraper , this is because i think you want some thing like zooming in google map , if you want this , you have function , and your function trigger if user scroll on your Map ( for zoom in/out ) , and cursor must set on your that element , have Listener

You have added scroll listener. It will listen when page is scroll. You have to use wheel listener.
document.addEventListener("wheel", detect);
function detect (e) {
console.log(e)
};
Above code will work for you.

How to disable canvas elements from hijacking mouse wheel when scrolling through a page?

In HTML5 (I think?), Canvas elements on the page will interrupt scrolling when the mouse is hovering over them.
I have generated a page using Chart.js, which has many graphs on it, all of which are rendered inside a element.
Since the page is very long (vertically), the user will often scroll up / down the page to look at the various graphs. Each time they scroll onto a , they have to mouse out to continue scrolling, which is inconvenient.
Is there any way to override the canvas element's control of the mouse wheel event? I have no functionality tied to the mouse wheel. In the interim I've advised users to use keyboard shortcuts.
Thanks, as always, to this incredibly helpful community. If I find a work-around or solution I will post it here.

If you are just using Chart.js, I don't think Chart.js will hijack the wheel event. But if you use chartjs-plugin-zoom together, the wheel event will be hijacked.
(chartjs-plugin-zoom is a zoom and pan plugin for Chart.js)
chartjs-plugin-zoom hijacks mouse wheel when scrolling. If you would like the user to use mouse wheel to scroll up or down the page, instead of zooming in or out a chart, you can un-register the wheel event from the chart, as below:
var myChart = new Chart(ctx, {...});
myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);
You can re-add the event handler whenever needed:
myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);
Check out this example on jsfiddle.

This is an example canvas:
canvas
{
background-color: red;
}
<canvas></canvas>
Run the snippet and test it. You will see there is no scroll suppression at all.
What you experience is something Chart.js adds on purpose.
To remove it do, with jQuery, as follows:
$(function () {
$("*").off("scroll");
});
This will remove all scroll handlers from all elements on the page, or a less aggressive way:
$("canvas").off("scroll");
This last way is less aggressive and keeps non-canvases alone, but it may not suffice. The scroll handler may be attached to an ancestor of the canvas, such as a an invisible div.

To exclusively capture the event you could directly change the onmousewheel method of the element.
this.canvas.onmousewheel = function(evt){
//perform your own Event dispatching here
return false;
};
```

Config option in setup. This will disable the zoom plugin.
options: {
plugins: {
zoom: false
}
}

Simulating dragging for DIV, issue with fast moving mouse pointer

I need to simulate a dragging effect, basically when an user click and kept hold the mouse on a DIV, it should be re-positioned accordingly to mouse coordinates (following the mouse).
This script works fine:
http://jsbin.com/vurumupoqu/1/
Except when a user click and hold very near the edge of the DIV and move FAST and far away the mouse outside the DIV, in this case is not being dragged at all.
I have tried several option with mouseleave and mouseout with not success.
I need the DIV being dragged even if the user move fast the mouse when key is hold anywhere on the page.
I would like to know:
How to fix this issue? (I meanly target latest Chrome and Firefix).
Could be a better option using HTML5 drag? If yes why?

Bind the mousemove event handler to document instead of the element itself:
document.addEventListener('mousemove', function (event) {
console.log('+ mousemove')
this.logicDrag();
}.bind(this));
http://jsbin.com/deyiwaqeqa/2/
Explanation
A mousemove event is not triggered for every pixel when you move the mouse around. This means that the mouse might have left #target - before #target has been moved to match the new mouse position.

How do I force the mouse cursor to change without a mouse movement in Javascript?

In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.
When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.
The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.
Note that the click still works - this is a purely cosmetic (but annoying) aberration.
Can I force the browser to re-evaluate the point under the cursor?

The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.
Javascript:
var theButton = document.getElementById('theButton');
theButton.disabled = true;
theButton.setAttribute('style','cursor:default;');
// animation is complete
theButton.disabled = false;
theButton.removeAttribute('style');
jQuery:
var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');
// animation is complete
$theButton.prop('disabled',false).css('cursor','pointer');

Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.

Try to set the curser of all elements using the * wildcard in jquery. See if this will update the cursor.

It seems like the root of your question was to how to prevent double animating. Instead of placing a <div> over it, you can just do it with JavaScript.
Set a global variable called isAnimating to true when you start your animation. At the top of your click handler add this line if (isAnimating) return false; Obviously, you need to set isAnimating to false as soon as the animation is completed, either through a timer or in some kind of callback function.
This will prevent double animating, without doing anything silly with the DOM that would affect the hover states, or so I'd hope!
Let me know if that's not what you meant and I'll take another look at it!

Trigger an event on a specific part of an image

I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?

Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)

You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.

i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map

An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});

I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.