Avoid mouseup event when selecting a file from dialog when double clicking

Question

I have a input[type="file"] in my web page and when the file dialog is open and I select a file with double clicking the mouseup event is triggered. But if I select the file and then click the Open button to select there is no extra event.

This behavior is specific to Firefox, I tested in Chrome, IE and Opera and there is not extra mouseup event. Also there is no mousedown event, so the log will have two sequential mouseup events.

HTML:

<input type="file" />

JavaScript:

jQuery(document).mouseup(function(e) {
    //...
});

Here is a fiddle where you can see this behavior. To see it in action make sure that the file dialog is over the Result box of the jsfiddle page.

How can I avoid this? Is this a browser bug? Googling didn't come up with any useful results.

Edit: This issue appears on my Firefox (version 32.0.1 on Win7 64bit) but not on Firefox 32.0 in Linux.

Maybe you can use one of [these](http://api.jquery.com/category/events/event-object/) which could indicate it's the dialog? — artm, Sep 17 '14 at 14:46
I looked at the properties of `e` but couldn't see something useful to detect its from a double click or it occurs after the file dialog closes. — Tasos K., Sep 17 '14 at 14:52
A dodgy fix could be to unbind the mouseup when dialog is shown and re-bind when it closes. Not sure if it'll work though. — artm, Sep 17 '14 at 14:53

Tasos K. · Accepted Answer · 2014-09-21T14:13:53.290

While looking a bit more into this I realized that this behaviour creates a stray mouseup event that is not fired after a mousedown event.

The fact that a mouseup event is always after a mousedown event is true in all modern browsers. The only case I found not to be true is when there is a double-click event in IE 5-8 (Source).

So, the solution I used was to set a flag that a mousedown event occurs and that the mouseup event will occur the flag should be set to true.

For example:

var mousedown = false;

jQuery(document).mousedown(function (e) {
    mousedown = true;
});

jQuery(document).mouseup(function (e) {
    if (!mousedown) { // Stray mouseup event detected, handle it with 
        /*
        e.preventDefault();
        e.stopPropagation();
        */
    }
    mousedown = false;
});

score 0 · Answer 2 · answered Sep 18 '14 at 13:28

I have try your code. I think its difficult without flag value because when double click the file, before releasing second click the menu will close and it will fire 'MouseUp' event. I have solved it by using flag value. Please see this fiddle.

HTML

<input type="file" id='file1'/>
<div id="log"></div>

Java Script

var flag;
$(document).mouseup(function(e) {

    if(e.target.id != 'file1' && flag==1){
        flag = 0;
    }
    else if(e.target.id == 'file1'){
        flag = 1;        
        $('#log').prepend('mouseup: ' + (new Date()).toString() + '<br/>');
    }
    else{
        flag = 0;
        $('#log').prepend('mouseup: ' + (new Date()).toString() + '<br/>');
    }
});

$(document).mousedown(function(e) {

    $('#log').prepend('mousedown: ' + (new Date()).toString() + '<br />');

});

Thank you

Avoid mouseup event when selecting a file from dialog when double clicking

2 Answers2