JavaScript: mouse events stop firing while the mouse is downGetting the ID of the element that fired an eventStop setInterval call in JavaScriptHow to get mouseup to fire once mousemove completejQuery get mouse position within an elementAjax request returns 200 OK, but an error event is fired instead of successJavascript IE mouse events restricted to original recipient?cannot stop mouse event propagationMouseup event on document is not fired after hovering over iframeWhy the keyup event is not fired on an element in JavaScript while moving the mouse with the left button held down?Mouse events fire on all overlapping elements
Graphs for which a calculus student can reasonably compute the arclength
How can God warn people of the upcoming rapture without disrupting society?
Modeling the uncertainty of the input parameters
(A room / an office) where an artist works
What's this phrase on the wall of a toilet of a French château ?
What can Amex do if I cancel their card after using the sign up bonus miles?
Is there any way to stop a user from creating executables and running them?
Why aren't rainbows blurred-out into nothing after they are produced?
Can I enter the USA with an E-2 visa and a one way flight ticket?
How do some PhD students get 10+ papers? Is that what I need for landing good faculty position?
Are there really no countries that protect Freedom of Speech as the United States does?
Programming of ICs in general (MCU / FPGA / Serdes IC)
Is there a SQL/English like language that lets you define formulations given some data?
Is this n-speak?
Why is statically linking glibc discouraged?
Is there a way to count the number of lines of text in a file including non-delimited ones?
Why did Saruman lie?
Are differences between uniformly distributed numbers uniformly distributed?
In which case does the Security misconfiguration vulnerability apply to?
Heating Margarine in Pan = loss of calories?
Does Nightpack Ambusher's second ability trigger if I cast spells during the end step?
Why does tag require braces while frac doesn't?
Telephone number in spoken words
How to find directories containing only specific files
JavaScript: mouse events stop firing while the mouse is down
Getting the ID of the element that fired an eventStop setInterval call in JavaScriptHow to get mouseup to fire once mousemove completejQuery get mouse position within an elementAjax request returns 200 OK, but an error event is fired instead of successJavascript IE mouse events restricted to original recipient?cannot stop mouse event propagationMouseup event on document is not fired after hovering over iframeWhy the keyup event is not fired on an element in JavaScript while moving the mouse with the left button held down?Mouse events fire on all overlapping elements
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have encountered a situation where certain mouse events stops firing while the user is dragging with the mouse.
Here is a jsFiddle of the issue.
UPDATE: You can find here a much simpler jsFiddle which also displays the issue.
The context
I am creating a tool to crop images. To do this, I create a set of <div> elements over an image, and the user will be able to drag the corners and the edges of the parent <div> by dragging one of the child <div>s.
The details
On mousedown, I add two event listeners to the document body:
- a
mousemoveevent listener, to fire constantly - a
mouseupevent listener, to fire once and remove themousemovelistener when the user stops dragging the mouse
The result
This always works perfectly the first time you drag a corner or an edge. However, the second time you drag the same corner or edge, the mousemove event fires between 1 and 6 times (in my experience) and then stops. The mouseup event is not fired when you release the mouse, but from that moment on, the mousemove events resume, and a subsequent click-and-release will generate a mouseup event.
Investigation
In Chrome Dev Tools, I can see that the event listeners are present by entering getEventListeners(document.body) into the console, or by checking in the Event Listeners pane of the Elements tab, for the body element.
Any help in understanding why this is occurring, and in how to resolve this issue will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>Crop Image</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="crop">
<div class="topLeft"></div>
<div class="top"></div>
<div class="topRight"></div>
<div class="right"></div>
<div class="bottomRight"></div>
<div class="bottom"></div>
<div class="bottomLeft"></div>
<div class="left"></div>
</div>
<pre id="feedback"></pre>
<script src="js/crop.js"></script>
</body>
</html>
CSS
div#crop
position: relative;
width: 320px;
height: 320px;
cursor: pointer;
div#crop div
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #000;
box-sizing: border-box;
div#crop .top,
div#crop .bottom
left: 20px;
width: calc(100% - 40px);
div#crop .left,
div#crop .right
top: 20px;
height: calc(100% - 40px);
div#crop .topRight,
div#crop .right,
div#crop .bottomRight
left: auto;
right: 0;
div#crop .bottomLeft,
div#crop .bottom,
div#crop .bottomRight
top: auto;
bottom: 0;
pre#feedback
position: fixed;
top:40px;
left:40px
JavaScript
"use strict"
let cropType
, counter
let div = document.getElementById("crop")
let feedback = document.getElementById("feedback")
document.body.onmousemove = log
div.addEventListener("mousedown", startResizeImage, false)
function startResizeImage(event)
log("startResize")
cropType = event.target.className
counter = 0
document.body.addEventListener("mousemove", resizeImage, false)
document.body.addEventListener("mouseup", stopResizeImage, once: true)
function resizeImage(event)
log ("drag (" + ++counter + ") " + cropType)
function stopResizeImage()
log("stopResize")
document.body.removeEventListener("mousemove", resizeImage, false)
function log(data)
data = data.type
javascript mouseevent
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
I have encountered a situation where certain mouse events stops firing while the user is dragging with the mouse.
Here is a jsFiddle of the issue.
UPDATE: You can find here a much simpler jsFiddle which also displays the issue.
The context
I am creating a tool to crop images. To do this, I create a set of <div> elements over an image, and the user will be able to drag the corners and the edges of the parent <div> by dragging one of the child <div>s.
The details
On mousedown, I add two event listeners to the document body:
- a
mousemoveevent listener, to fire constantly - a
mouseupevent listener, to fire once and remove themousemovelistener when the user stops dragging the mouse
The result
This always works perfectly the first time you drag a corner or an edge. However, the second time you drag the same corner or edge, the mousemove event fires between 1 and 6 times (in my experience) and then stops. The mouseup event is not fired when you release the mouse, but from that moment on, the mousemove events resume, and a subsequent click-and-release will generate a mouseup event.
Investigation
In Chrome Dev Tools, I can see that the event listeners are present by entering getEventListeners(document.body) into the console, or by checking in the Event Listeners pane of the Elements tab, for the body element.
Any help in understanding why this is occurring, and in how to resolve this issue will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>Crop Image</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="crop">
<div class="topLeft"></div>
<div class="top"></div>
<div class="topRight"></div>
<div class="right"></div>
<div class="bottomRight"></div>
<div class="bottom"></div>
<div class="bottomLeft"></div>
<div class="left"></div>
</div>
<pre id="feedback"></pre>
<script src="js/crop.js"></script>
</body>
</html>
CSS
div#crop
position: relative;
width: 320px;
height: 320px;
cursor: pointer;
div#crop div
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #000;
box-sizing: border-box;
div#crop .top,
div#crop .bottom
left: 20px;
width: calc(100% - 40px);
div#crop .left,
div#crop .right
top: 20px;
height: calc(100% - 40px);
div#crop .topRight,
div#crop .right,
div#crop .bottomRight
left: auto;
right: 0;
div#crop .bottomLeft,
div#crop .bottom,
div#crop .bottomRight
top: auto;
bottom: 0;
pre#feedback
position: fixed;
top:40px;
left:40px
JavaScript
"use strict"
let cropType
, counter
let div = document.getElementById("crop")
let feedback = document.getElementById("feedback")
document.body.onmousemove = log
div.addEventListener("mousedown", startResizeImage, false)
function startResizeImage(event)
log("startResize")
cropType = event.target.className
counter = 0
document.body.addEventListener("mousemove", resizeImage, false)
document.body.addEventListener("mouseup", stopResizeImage, once: true)
function resizeImage(event)
log ("drag (" + ++counter + ") " + cropType)
function stopResizeImage()
log("stopResize")
document.body.removeEventListener("mousemove", resizeImage, false)
function log(data)
data = data.type
javascript mouseevent
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
I have encountered a situation where certain mouse events stops firing while the user is dragging with the mouse.
Here is a jsFiddle of the issue.
UPDATE: You can find here a much simpler jsFiddle which also displays the issue.
The context
I am creating a tool to crop images. To do this, I create a set of <div> elements over an image, and the user will be able to drag the corners and the edges of the parent <div> by dragging one of the child <div>s.
The details
On mousedown, I add two event listeners to the document body:
- a
mousemoveevent listener, to fire constantly - a
mouseupevent listener, to fire once and remove themousemovelistener when the user stops dragging the mouse
The result
This always works perfectly the first time you drag a corner or an edge. However, the second time you drag the same corner or edge, the mousemove event fires between 1 and 6 times (in my experience) and then stops. The mouseup event is not fired when you release the mouse, but from that moment on, the mousemove events resume, and a subsequent click-and-release will generate a mouseup event.
Investigation
In Chrome Dev Tools, I can see that the event listeners are present by entering getEventListeners(document.body) into the console, or by checking in the Event Listeners pane of the Elements tab, for the body element.
Any help in understanding why this is occurring, and in how to resolve this issue will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>Crop Image</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="crop">
<div class="topLeft"></div>
<div class="top"></div>
<div class="topRight"></div>
<div class="right"></div>
<div class="bottomRight"></div>
<div class="bottom"></div>
<div class="bottomLeft"></div>
<div class="left"></div>
</div>
<pre id="feedback"></pre>
<script src="js/crop.js"></script>
</body>
</html>
CSS
div#crop
position: relative;
width: 320px;
height: 320px;
cursor: pointer;
div#crop div
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #000;
box-sizing: border-box;
div#crop .top,
div#crop .bottom
left: 20px;
width: calc(100% - 40px);
div#crop .left,
div#crop .right
top: 20px;
height: calc(100% - 40px);
div#crop .topRight,
div#crop .right,
div#crop .bottomRight
left: auto;
right: 0;
div#crop .bottomLeft,
div#crop .bottom,
div#crop .bottomRight
top: auto;
bottom: 0;
pre#feedback
position: fixed;
top:40px;
left:40px
JavaScript
"use strict"
let cropType
, counter
let div = document.getElementById("crop")
let feedback = document.getElementById("feedback")
document.body.onmousemove = log
div.addEventListener("mousedown", startResizeImage, false)
function startResizeImage(event)
log("startResize")
cropType = event.target.className
counter = 0
document.body.addEventListener("mousemove", resizeImage, false)
document.body.addEventListener("mouseup", stopResizeImage, once: true)
function resizeImage(event)
log ("drag (" + ++counter + ") " + cropType)
function stopResizeImage()
log("stopResize")
document.body.removeEventListener("mousemove", resizeImage, false)
function log(data)
data = data.type
javascript mouseevent
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
I have encountered a situation where certain mouse events stops firing while the user is dragging with the mouse.
Here is a jsFiddle of the issue.
UPDATE: You can find here a much simpler jsFiddle which also displays the issue.
The context
I am creating a tool to crop images. To do this, I create a set of <div> elements over an image, and the user will be able to drag the corners and the edges of the parent <div> by dragging one of the child <div>s.
The details
On mousedown, I add two event listeners to the document body:
- a
mousemoveevent listener, to fire constantly - a
mouseupevent listener, to fire once and remove themousemovelistener when the user stops dragging the mouse
The result
This always works perfectly the first time you drag a corner or an edge. However, the second time you drag the same corner or edge, the mousemove event fires between 1 and 6 times (in my experience) and then stops. The mouseup event is not fired when you release the mouse, but from that moment on, the mousemove events resume, and a subsequent click-and-release will generate a mouseup event.
Investigation
In Chrome Dev Tools, I can see that the event listeners are present by entering getEventListeners(document.body) into the console, or by checking in the Event Listeners pane of the Elements tab, for the body element.
Any help in understanding why this is occurring, and in how to resolve this issue will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>Crop Image</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="crop">
<div class="topLeft"></div>
<div class="top"></div>
<div class="topRight"></div>
<div class="right"></div>
<div class="bottomRight"></div>
<div class="bottom"></div>
<div class="bottomLeft"></div>
<div class="left"></div>
</div>
<pre id="feedback"></pre>
<script src="js/crop.js"></script>
</body>
</html>
CSS
div#crop
position: relative;
width: 320px;
height: 320px;
cursor: pointer;
div#crop div
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #000;
box-sizing: border-box;
div#crop .top,
div#crop .bottom
left: 20px;
width: calc(100% - 40px);
div#crop .left,
div#crop .right
top: 20px;
height: calc(100% - 40px);
div#crop .topRight,
div#crop .right,
div#crop .bottomRight
left: auto;
right: 0;
div#crop .bottomLeft,
div#crop .bottom,
div#crop .bottomRight
top: auto;
bottom: 0;
pre#feedback
position: fixed;
top:40px;
left:40px
JavaScript
"use strict"
let cropType
, counter
let div = document.getElementById("crop")
let feedback = document.getElementById("feedback")
document.body.onmousemove = log
div.addEventListener("mousedown", startResizeImage, false)
function startResizeImage(event)
log("startResize")
cropType = event.target.className
counter = 0
document.body.addEventListener("mousemove", resizeImage, false)
document.body.addEventListener("mouseup", stopResizeImage, once: true)
function resizeImage(event)
log ("drag (" + ++counter + ") " + cropType)
function stopResizeImage()
log("stopResize")
document.body.removeEventListener("mousemove", resizeImage, false)
function log(data)
data = data.type
javascript mouseevent
javascript mouseevent
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
edited Mar 27 at 11:25
James Newton
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
asked Mar 27 at 10:21
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The reason the second drag operation was failing was because the browser used the first drag-and-release to create a selection, whose anchorNode was the <div> that was clicked. The second drag then tried to move this selection. The clue that revealed this was that the cursor changed to a move closed hand, almost immediately after the second drag began.
The solution is to use CSS to prevent the draggable <div>s from being selected:
div#crop
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
The irony is that, in the past when I have created a drag feature, I have always disabled selection, for cosmetic reasons. I had not realized that it was a key factor for the success of the operation.
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55374836%2fjavascript-mouse-events-stop-firing-while-the-mouse-is-down%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The reason the second drag operation was failing was because the browser used the first drag-and-release to create a selection, whose anchorNode was the <div> that was clicked. The second drag then tried to move this selection. The clue that revealed this was that the cursor changed to a move closed hand, almost immediately after the second drag began.
The solution is to use CSS to prevent the draggable <div>s from being selected:
div#crop
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
The irony is that, in the past when I have created a drag feature, I have always disabled selection, for cosmetic reasons. I had not realized that it was a key factor for the success of the operation.
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
The reason the second drag operation was failing was because the browser used the first drag-and-release to create a selection, whose anchorNode was the <div> that was clicked. The second drag then tried to move this selection. The clue that revealed this was that the cursor changed to a move closed hand, almost immediately after the second drag began.
The solution is to use CSS to prevent the draggable <div>s from being selected:
div#crop
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
The irony is that, in the past when I have created a drag feature, I have always disabled selection, for cosmetic reasons. I had not realized that it was a key factor for the success of the operation.
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
The reason the second drag operation was failing was because the browser used the first drag-and-release to create a selection, whose anchorNode was the <div> that was clicked. The second drag then tried to move this selection. The clue that revealed this was that the cursor changed to a move closed hand, almost immediately after the second drag began.
The solution is to use CSS to prevent the draggable <div>s from being selected:
div#crop
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
The irony is that, in the past when I have created a drag feature, I have always disabled selection, for cosmetic reasons. I had not realized that it was a key factor for the success of the operation.
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
The reason the second drag operation was failing was because the browser used the first drag-and-release to create a selection, whose anchorNode was the <div> that was clicked. The second drag then tried to move this selection. The clue that revealed this was that the cursor changed to a move closed hand, almost immediately after the second drag began.
The solution is to use CSS to prevent the draggable <div>s from being selected:
div#crop
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
The irony is that, in the past when I have created a drag feature, I have always disabled selection, for cosmetic reasons. I had not realized that it was a key factor for the success of the operation.
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
answered Mar 27 at 17:20
James NewtonJames Newton
2,8414 gold badges31 silver badges74 bronze badges
2,8414 gold badges31 silver badges74 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55374836%2fjavascript-mouse-events-stop-firing-while-the-mouse-is-down%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
