How do I stop (no-)dragging in javascript?

Question

I'm working on an online javascript canvas (not the HTML5 element, but a painting canvas). When the user starts painting, he clicks and moves the mouse from one side of the canvas to the other. This canvas is actually a table which consists of one pixel cells.

This is fine, but there's one problem. When the user moves out of the canvas while holding the mouse, Firefox thinks he tries to drag the table. It shows a no-drag cursor and 'onmousemove' isn't fired anymore, which is necessary for painting. I tried to use use CSS cursors, but the no-drag cursor 'overrides' the normal cursor. I also tried to blur (unfocus) the element. Any ideas?

score 0 · Accepted Answer · answered Mar 28 '11 at 00:21

0

In order to successfully drag out of a canvas you are going to have to use AddEventListener. There are some good tutorials of how to use AddEventListener here. Example 4 on that page is a good starting point for what you want to do.

answered Mar 28 '11 at 00:21

Simon Sarris

62,212
13
141
171

Thanks, but I doesn't work out. I just can't force a 'mouseup' – bopjesvla Mar 29 '11 at 13:37
Yes, you can capture the 'onmouseout' event of a canvas and treat it the same as your mouseup event. – Simon Sarris Mar 29 '11 at 13:49

How do I stop (no-)dragging in javascript?

1 Answers1