I am trying to drag an image with Javascript (no libraries). I am able to listen to mousedown
and mousemove
events. For some reason, I am not able to capture the mouseup
event after mousemove
. (I can capture mouseup
if it is a click but not if it is a drag). I have tried to listen to the event on document, window, and the image. Here's the url to my test page:
https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498
Any help on this would be greatly appreciated!
The mouseup event occurs when the left mouse button is released over the selected element. The mouseup() method triggers the mouseup event, or attaches a function to run when a mouseup event occurs. Tip: This method is often used together with the mousedown() method.
Mouseup is always firing before click, despite this order.
If you wish suppress the click event you have add the statement event. preventDefault() in the click event handler only and not the mouseup event handler.
The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves.
Found the issue, if it is going to be of help to anyone:
I added event.preventDefault();
in the mousedown
event and now I am getting mouseup
notifications.
Strangely, I've found that when I set my text as unselectable using the below CSS, that inhibits the mouseup
event from firing as well -- perhaps this will help someone else.
-moz-user-select: none; -khtml-user-select: none; user-select: none;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With