Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Force a Javascript Event (onmouseup) programatically

Posted on 2003-12-04
Last Modified: 2011-09-20
Hello All,

I have a problem, I am a bear. jk :) As soon as I click down on an item in a select list, I want that item to be selected, but it will not be selected until there has been a mousedown and a mouseup. How can I get around this or force a mouseup event as soon as they mousedown on the drop list. Does this make sense? It doesn't neceaarily have to be 'selected', if for example there is a way to find out what item has been mousedown'ed on, that would be sufficient, but I have no idea except for a really bad way that looks at x and y co-ordinates of the mouse and finds which item you would have been over.



"The Earth is but One Country, and Mankind its Citizens" - Baha'i Faith
Question by:YogiMySonMySon
  • 4
  • 2
LVL 15

Expert Comment

ID: 9879307
I'm a bit confused.

Try this:

<select onChange="document.getElementById('txt').innerHTML = this.value">
<option value="Option 1">Option 1
<option value="Option 2">Option 2
<option value="Option 3">Option 3
<span id="txt">Option 1</span>

Tell me what else it needs to do.
LVL 10

Expert Comment

ID: 9879675
i can't think of any other way besides capturing the Y cords of the mouse
LVL 10

Accepted Solution

Bustarooms earned 30 total points
ID: 9879679
this is super simplified and probably has a million problems and I would never use it on any site i design

but maybe you would

<script language="Javascript">
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
 window.status = 'temp y = ' + tempY
  return tempY

function whichIsClicked(){
var min = 20
var select = document.forms[0].elements[0];
   if(tempY >= min && tempY < min + 17)
        alert('You have moused down on ' + select.options[i].text);
    min += 17

<select size=10 onmousedown="whichIsClicked();">
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.


Author Comment

ID: 9880311
Thanks a lot for the ideas.

hmm, is there a way of forcing a mouseup event without the mouse actually being un-pressed?
I would rather not use the x-y co-ordinates. You know what i'm trying to do right? get the value of the item in the list box right after my mouse is clicked down on it (before I actually let go of the mouse, which would be an 'onClick'). I haven;t tried yours Timbo but i'm assuming onChange is the same(needs a full click, mouse-up and mouse-down.). Is there a way to do it with the drag events? Basically the whole reason I am asking this question is because, say for example there is this list:


And I click on 'Apples' and 'drag' it to another part of the screen(actually just make a <div>who's innerText is set to the item I chose in the List and I make it follow my mouse. )

Now, I want to drag 'Oranges', so I put my mouse on Oranges and drag it, BUT Apples is still highlighted and I end up dragging a piece of text that says the wrong thing "Apples".

I don't want to have to click completely on the item(mouse-up, and mouse-down), THEN drag it across, which I know works because now the thing I actually want to drag is selected. I just want to be able to click on it once and drag.

Author Comment

ID: 9880397
Bustarooms, you don't need to use the X - co-ordinate do you? Are all standard list box items 17 pixels high? If I track the Y position of the list box that code should work all the time (I think). For what reason wouldn't you use it?
LVL 10

Expert Comment

ID: 9881885
they are not necessarily 17 pixels high.   there are way too many variables involved here such as browser type, client settings, OS...i just wouldnt do it

no need for X, but that is a function i use for getting both X and Y but we only use the Y here.

you can track where the list box's top part is by changing the min value   var min = 600;
LVL 10

Expert Comment

ID: 9889027
dont give me a b just because you dont like the answer

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question