I have two div elements. When I press mouse button on one of them, then move mouse to another one or just somewhere else and then release the button, mouseup event is not fired. It is actually fired, but only for the first several random times (usually 1…10). Then it stops. Mouse curser turns to a stop sign and only mousedown event is fired.
I tried to add mouseup eventlistener to document.documentElement and document element as it was suggested here but it did not help. Mouse curser is still turning to a stop sign after several successful mouseups and does not fire until page is reloaded.
It still fires perfectly if you release the button on the same element.
How to make mouseup event to be fired always when mouse button is released disregarding where you have started and finished? It is crucial for my program.
I checked it in Chrome. In Firefox it works almost the same, but the number of possible mouseup events on another then started element is little bit more (up to 20). Then the same stop sign appears.
Here is a screenshot
Here is a JSFiddle
I have found Solution!!!
This topic was very much helpful.
So why does the browser shows stop sign when you move the mouse with pressed button? Because it thinks you are trying to drag this element! But why it does not protest when you do it for the first (or several first) time? Because pressing mouse first time you....just select this element. Then you try to drag it and only this draws a protest of the browser and it shows stop sign. During showing stop sign browser cannot fire any mouse events.
So how to prevent browser from thinking you are going to select and drag this element. It’s very simple. Just add -webkit-user-select: none; in the CSS for this element (it’s for Chrome, for Firefox the prefix will be -moz- and so on).
Now all mouse events will work disregarding when, why and in which order mouse buttons were pressed!
Here is a JSFiddle
