I am trying to draw rectangles (divs) using mouse events. Here is my code:
http://jsbin.com/apediti/2/edit
Basically I'm doing the following:
On mousedown
I save the mouse coordinates, create a new div with size: width=0
, height=0
, and bind event handlers for mousemove
and mouseup
.
On mousemove
I resize the div based on the current mouse position.
On mouseup
I unbind the event handlers for mousemove
and mouseup
.
It seems to work good in Firefox, and even IE 10, but in Chrome sometimes the mousemove
event fires only 2 or 3 times, after mousedown, so the drawn div doesn't get resized.
I can't find the reason why. Any help is appreciated.
This is happening because Chrome is attempting to select the hovered-over rect
element on drag. To fix this, simply prevent the rect
element from being selected by setting the user-select
CSS property to none
(this is vendor prefixed and will not work on IE9 or lower ):
.rect {
position: absolute;
border: 2px solid rgba(199, 25, 9, 0.64);
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.