Mouse Event

muklee · September 30th, 2004, 10:50 PM

In javascript, we have an event called onKeyPress. Is it possible that we could simulate the same function as "onKeyPress" when we press down the mouse button? And how, if possible?

Any feedback is appreciate. Thanks

ChrisScott · October 1st, 2004, 03:08 AM

Hey muklee,

Have you tried the onmousedown event?
http://www.devguru.com/Technologies/...mousedown.html

HTH,

Chris

muklee · October 1st, 2004, 06:04 AM

Sorry for my late reply. About the onMouseDown event, I try to use it but it doesn't work as what I expected.

For instance, I have a drop-down menu with 3 options ("A", "B", "C"). When user selects "C" and clicks on a button, "C" will be moved to 2nd position while "B" will move down to the 3rd place. All the processes are done by calling a javascript function by invoking the onClick event.

It works but if the drop-down menu has more than 30 options, then users have to click so many time just to move a particular option to a certain position.

I try to replace the onClick() event with the onMouseDown() event but it doesn't work as the onKeyPress() event.

So, any suggestion? Thanks in advanced.

joefawcett · October 1st, 2004, 06:28 AM

You can't send key strokes to a screen in HTML/JavaScript. What exactly are you trying to achieve?

--

Joe

muklee · October 1st, 2004, 06:44 AM

I am trying to move a particular value in a drop-down menu to a certain position when I click on the mouse button without release it, untill the selected option in the drop-down menu reach at the desire position, I will release the mouse button and the movement will stop.

Currently, I use the onClick() event to handle it. But, I found out that it is not that user-friendly when the drop-down menu has a very long options. I have to click so many time to move a selected value to a particular position.

Thanks for reply.

joefawcett · October 1st, 2004, 08:34 AM

Not perfect and the exchangeOptions function is abit feeble but if you click once on buttons the selected option moves and if you keep it held down it keeps moving.

Code:

<html>
<head>
<title>Move Options</title>
<script type="text/jscript">

  function exchangeOptions(Listbox, FromOption, ToOption)
  {
    var oNewOption = document.createElement("option");
    oNewOption.text = ToOption.text;
    oNewOption.value = ToOption.value;
    //alert("To: " + ToOption.text + "\n" + "From: " + FromOption.text + "\n" + "New: " + oNewOption.text);
    ToOption.text = FromOption.text;
    ToOption.value = FromOption.value;
    FromOption.text = oNewOption.text;
    FromOption.value = oNewOption.value;
    ToOption.selected = true;
  }


  function moveOption(Listbox, Direction)
  {
    var iSelectedIndex = Listbox.selectedIndex;
    var iOptionCount = Listbox.options.length;
    var bAtTop = (iSelectedIndex == 0);
    var bAtBottom = (iSelectedIndex == (iOptionCount - 1));
    var iAdjustment = 0;
    if (Direction == "up")
    {
      if (!bAtTop)
      {
        iAdjustment = -1;        
      }    
    }
    else
    {
      if (!bAtBottom)
      {
        iAdjustment = 1; 
      }    
    }
    if (iAdjustment != 0)
    {
      var oMoveOption = Listbox.options[iSelectedIndex];
      var oReplaceOption = Listbox.options[iSelectedIndex + iAdjustment];
      exchangeOptions(Listbox, oMoveOption, oReplaceOption);
    }
  } 

  var bContinueMoving = false;

  function cancelMove()
  {
    bContinueMoving = false;     
  }

  function startMove(Direction)
  {
    if (window.event.button == 1)
    {
      bContinueMoving = true;
      window.setTimeout("moveSelectedOption('" + Direction + "')", 300);
    }
  }

  function moveSelectedOption(Direction)
  {    
      var oListbox = document.getElementById("lstMenu");
      moveOption(oListbox, Direction);
      if (bContinueMoving)
      {
        window.setTimeout("moveSelectedOption('" + Direction + "')", 1200);    
      }
  }

</script>
</head>

<body bgcolor="#FFFFFF">
<table border="0" width="40%" align="center"><tbody>
<tr><td width="60%" rowspan="3">
<select id="lstMenu" size="10" style="width: 200px">
  <option value="0" selected>Option 0</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>  
</select>
</td><td width="40%"><input type="button" value="^" onmousedown="startMove('up');" onmouseup="cancelMove();"></td></tr>
<tr></td><td>&nbsp;</td></tr>
<tr></td><td><input type="button" value="v" onmousedown="startMove('down');" onmouseup="cancelMove();"></td></tr>
</tbody>
</table>
</body>
</html>

--

Joe

muklee · October 1st, 2004, 10:10 AM

Thanks a lot man, your code is marvelous. It work exactly what I want.