How to manually call a mouseup event in JavaScript?

August 14, 2007 12:13 PM

Need a way to complete a mousedown/mouseup event cycle in JavaScript, when said cycle is interrupted by a dialog box. Not sure if there's a way to "manually" call the mouseup event after the fact, or what.

I've got a multi-select form field, for which I'm trying to set up some JS to prevent accidental de-selection. Sounded simple enough, just have an onmousedown event that checks the current selection and pops up a confirm dialog if more than N items are selected.

Unfortunately, in the case where the user selects the affirmative answer - yes, I do want to just select the single list item I am clicking on, and de-selecting the 100 currently selected items is A-OK - the browser (FF 1.5 in this case) gets confused. It acts as if the mouseup event never occurred, so mouse movements cause the form field to act as if the user is clicking and dragging within the field (i.e. expanding the selection up or down from the item originally clicked upon). I assume this is because the user's mouse actions on the dialog box interrupt the event being handled by my onmousedown code.

Now, I don't consider myself a JS newbie by any stretch, but I can't for the life of me figure out how to solve this. Googling hasn't helped much due to the sheer volume of entry-level JS tutorials. I've tried utilizing formfield.click() but that doesn't change anything, and I can't find any obvious methods on the event object that might tell it to 'keep going'.

posted by cyrusdogstar to Computers & Internet (3 answers total)

Best answer: It sounds like a pretty hacky way to do what you're trying to do. How about keeping track of the field value in a variable, and then add an onchange handler that detects if the user just deselected a bunch of values, and offers to restore the previous selection?

From a usability perspective, it might also be better to put the confirmation in a div right below the field rather than a modal dialog.
posted by Sxyzzx at 1:06 PM on August 14, 2007

Best answer: I assume you're calling your dialog box via confirm()? If not, I'd start there.

I think that if your select box really is that large that it'll be aggravating for end-users to lose their selection, then you should re-think the approach. What about a dual select approach, where you move options from one select element to another? There are plenty of javascripts around to do that, and it'll be less prone to accidental disasters.
posted by mkultra at 1:36 PM on August 14, 2007

Response by poster: Sxyzzx, I tried onchange originally, but unfortunately that's "too late" - by the time onchange is fired, the selection update has already occurred. Ditto for onclick.

I hadn't really thought about using a non-modal confirmation - I guess there's no reason not to just use DOM manipulation to stick the yes/no button in the HTML itself. I would have to keep state in a variable like you suggest, but at least this way I get to sidestep the issue of event propagation/interruption.

mkultra, that's also a good idea - not sure why that didn't occur to me, as you're right, it's a very common solution (and yes, I am using confirm()). Right now I need a short-term fix, so I'll likely try Sxyzzx's idea first, but I'll definitely make a note to examine the alternative approach.

Thanks to both of you :)
posted by cyrusdogstar at 2:45 PM on August 14, 2007