Question

我的网页上有一个input[type="file"]，当文件对话框打开时，我选择了一个双击mouseup事件的文件。但是，如果我选择该文件然后单击打开按钮以选择没有额外的事件。

此行为特定于Firefox，我在Chrome，IE和Opera中进行了测试，并且没有额外的mouseup事件。此外，没有mousedown事件，因此日志将有两个连续的mouseup事件。

HTML：

<input type="file" />

JavaScript的：

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

Here是一个小提琴，你可以看到这种行为。要查看其中的操作确保文件对话框位于jsfiddle页面的结果框中。

我该如何避免这种情况？这是一个浏览器错误吗？谷歌搜索没有提出任何有用的结果。

编辑：此问题出现在我的Firefox（Win7 64位版本32.0.1）上，但不出现在Linux上的Firefox 32.0上。

Answer 1

在进一步了解此问题时，我意识到此行为会导致在mouseup事件后未触发的迷路mousedown事件。

mouseup事件总是在mousedown事件之后的事实在所有现代浏览器中都是正确的。我发现不唯一的唯一情况是IE 5-8（Source）中有double-click事件。

因此，我使用的解决方案是设置一个mousedown事件发生的标志，并且mouseup事件将发生，标志应该设置为true。

例如：

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;
});

Answer 2

我试过你的代码。我认为没有标志值很困难，因为当双击文件时，在发布第二次点击之前，菜单将关闭，它将触发“MouseUp”＃39;事件。我通过使用标志值解决了它。请参阅此fiddle。

<强> HTML

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

Java脚本

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 />');

});

谢谢

双击时从对话框中选择文件时避免鼠标事件

2 个答案: