Record the MouseDown location, check witht eh MOuseUp location and if same show Menu

MrTIMarshall · 12-31-2012, 01:17 AM

Hello Everyone,

I'm new still at Javascript and I'm trying to do something like this:

Code:

table.onmousedown {
      f_pos_x = //Set the First X Location
      f_pos_y = //Set the first Y location
});
table.onmousedown {
      s_pos_x = //Set the Second X Location
      s_pos_y = //Set the Second Y Location
      if ("f_pos_x" == "s_pos_x" && "f_pos_y" == "s_pos_y") {
            set_tab('new2_tabs', 'tile_options');
      });
});

I have a click and drag map, where as if they click on a tile, I would like the menu to show, but I was havign the problem where if you click and drag again this menu would change so I need to record the mousedown location and check with the mouse up location and if they are the same then show the new menu.

Best Regards,
Tim

AndrewGSW · 12-31-2012, 02:51 AM

Useful information at quirksmode.

Comparing the coords before and after may prove unreliable, but I can't be certain of this. Another possibility is to set a flag/variable onmousedown and clear it onmousemove.. But I'm just speculating

vwphillips · 12-31-2012, 03:50 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function MouseDown(e){
 e=e||window.event;
 var obj=e.target?e.target:e.srcElement;
 while (obj.parentNode){
  if (obj.nodeName.toUpperCase()=='TD'){
   break;
  }
  obj=obj.parentNode;
 }
 if (obj.nodeName.toUpperCase()=='TD'){
  if (MouseDown.obj==obj){
   alert('the same TD');
  }
  MouseDown.obj=obj;
 }
}


</script>

</head>

<body>
<table width="150" height="50" border="1" onmousedown="MouseDown(event);" >
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
</body>

</html>

Old Pedant · 12-31-2012, 08:30 PM

Excuse me, but you are working *WAY* too hard.

You don't *REALLY* care if the mouse has move 2 pixels, right? And that's very likely to happen with a human hand controlling the mouse.

So, instead, just check to see if the mouse is in the SAME TILE!

Like this:

Code:

      // set up all the cells:
      for ( var r = 0; r < theMap.length; ++r )
      {
          var row = theMap[r];
          var tr = tbl.insertRow(-1);
          for ( var c = 0; c < row.length; ++c )
          {
              var cell = tr.insertCell(-1);
              cell.id = (theMap.length - r - 2) + ":" + (c+1-5);
              cell.className = classes[row.charAt(c)];
              cell.onmouedown = cellClickStart;
              cell.onmouseup  = cellClickEnd;
          }
      }

      ...

  var whereButtonDown = null;

  function cellCickStart( )
  {
      whereButtonDown = this;
  }
  function cellClickEnd( )
  {
      var bDown = whereBUttonDown;
      whereBUttonDown = null; // RESET IT!

      if ( bDown != this ) /* have we moved to a different tile? */
      {
          /* yes...so treat it as a drag: */
          mouseDragged( bDown, this );
          return;
      }

      // still in same cell, so just treat as a click & show menu:
      clk.innerHTML = this.id;
      typ.innerHTML = this.className;
      pop.style.display = "block";
  }

  function mouseDragged( fromCell, toCell )
  {
      .. you can write this ..
  }

New/changed stuff in red.

AndrewGSW · 12-31-2012, 08:45 PM

If, as stated, this is a click and drag map them presumably the target-tile will be the same for both mouseup and mousedown.

You might consider my earlier suggestion:

Code:

var justClick = false;

someElement.onmousedown = function () {
    justClick = true;
}
someElement.onmousemove = function () {
    justClick = false;
}
someElement.onmouseup = function () {
    if (justClick) {
        // show menu..
        return;
    }
}

Although it's hard to be certain without further information.

Old Pedant · 12-31-2012, 08:52 PM

Ahh...good point. If it's truly a drag. But I don't *THINK* it is. I think he's really trying to use this to move a playing piece from one tile to the next. Well, I guess we shall see.

MrTIMarshall · 12-31-2012, 08:54 PM

Thank you to vwphillips, Old Pedant and AndrewGSW.

I did not have Firefox on this system, and upon installing it and testing the website for myself, everything seemed to work.

I spoke to my friend again and he still doesn't remember seeing anything last night but did when I asked him again.

best Regards,
Tim