« previous next »
Pages: [1]   Go Down

Author Topic: onmousemove and onmousedown  (Read 4951 times)

0 Members and 1 Guest are viewing this topic.

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
onmousemove and onmousedown
« on: October 02, 2011, 03:15:42 pm »
I have this function, that's called by onmousemove="checkmouse(event)"; in body.

Code: [Select]
function checkmouse(event)
{
  var x = event.clientX - drawingCanvas.offsetLeft;
  var y = event.clientY - drawingCanvas.offsetTop;

  context.fillRect(x, y, 5, 5);
}
I was wondering how I can check if the mouse is both moving and down. I can do them separately (onmousemove or onmousedown), but not together. Do you have any ideas? Thanks.
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: onmousemove and onmousedown
« Reply #1 on: October 02, 2011, 04:03:04 pm »
You could try defining both window.onmousedown and and then defining window.onmousemove as well.
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: onmousemove and onmousedown
« Reply #2 on: October 02, 2011, 04:06:52 pm »
Quote from: Ikkerens on October 02, 2011, 04:03:04 pm
You could try defining both window.onmousedown and and then defining window.onmousemove as well.

Code: [Select]
function checkmouse(event)
{
  window.onmousedown = mousedown;

  function mousedown()
  {
    var x = event.clientX - drawingCanvas.offsetLeft;
    var y = event.clientY - drawingCanvas.offsetTop;

    context.fillRect(x, y, 5, 5);
  }
}
I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.

There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.
« Last Edit: October 02, 2011, 04:15:36 pm by ephan »
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: onmousemove and onmousedown
« Reply #3 on: October 02, 2011, 06:38:46 pm »
Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.
Logged
+1/-0 karm for this message



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: onmousemove and onmousedown
« Reply #4 on: October 03, 2011, 02:59:13 am »
Quote from: Deep Thought on October 02, 2011, 06:38:46 pm
Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.

Yes, but when do I check if it's up or down?
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: onmousemove and onmousedown
« Reply #5 on: October 03, 2011, 05:38:06 am »
Quote from: ephan on October 03, 2011, 02:59:13 am
Yes, but when do I check if it's up or down?

window.onmousemove
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: onmousemove and onmousedown
« Reply #6 on: October 03, 2011, 03:41:25 pm »
Quote from: Ikkerens on October 03, 2011, 05:38:06 am
Quote from: ephan on October 03, 2011, 02:59:13 am
Yes, but when do I check if it's up or down?

window.onmousemove

Quote from: ephan on October 02, 2011, 04:06:52 pm
Quote from: Ikkerens on October 02, 2011, 04:03:04 pm
You could try defining both window.onmousedown and and then defining window.onmousemove as well.

Code: [Select]
function checkmouse(event)
{
  window.onmousedown = mousedown;

  function mousedown()
  {
    var x = event.clientX - drawingCanvas.offsetLeft;
    var y = event.clientY - drawingCanvas.offsetTop;

    context.fillRect(x, y, 5, 5);
  }
}
I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.

There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.
« Last Edit: October 03, 2011, 03:41:44 pm by ephan »
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: onmousemove and onmousedown
« Reply #7 on: October 03, 2011, 04:40:43 pm »
Are you even returning false then?
When overriding an user event you need to return false to "cancel" the original effect, try that ;)
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: onmousemove and onmousedown
« Reply #8 on: October 03, 2011, 04:43:11 pm »
Code: [Select]
function checkmouse(event)
{
  window.onmousedown = mousedown;

  function mousedown()
  {
    var x = event.clientX - drawingCanvas.offsetLeft;
    var y = event.clientY - drawingCanvas.offsetTop;

    context.fillRect(x, y, 5, 5);
    return false;
  }
}
I tried that, I didn't know I had to return false; in order to cancel events when overriding them. However, this didn't work. Thanks!
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: onmousemove and onmousedown
« Reply #9 on: October 03, 2011, 04:51:47 pm »
Are you returning false on onmousemove? Cause I don't see mousemove in your code
Edit: So I've been trying to create what you were making, and came with this:
(It's not using canvas like you, but it should give you the general idea)

Moved here: http://ourl.ca/13341
« Last Edit: October 04, 2011, 07:55:44 am by Ikkerens »
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: onmousemove and onmousedown
« Reply #10 on: October 04, 2011, 09:22:49 am »
Code: [Select]
var drawingCanvas = document.getElementById('mycanvas');

if (drawingCanvas.getContext)
{
  var context = drawingCanvas.getContext('2d');
}

function main()
{
 
}

function checkmouse(event)
{
  window.onmousedown = mousedown;
  window.onmousemove = mousemove;

  function mousemove()
  {
    return false;
  }

  function mousedown()
  {
    var x = event.clientX - drawingCanvas.offsetLeft;
    var y = event.clientY - drawingCanvas.offsetTop;

    context.fillRect(x, y, 5, 5);
  }
}
I am now returning false on mouse move, but it still doesn't work smoothly. I will check your link right away.
Logged
Pages: [1]   Go Up
« previous next »