双击时从对话框中选择文件时，避免出现mouseup事件

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

本文关键字：mouseup 事件 文件 对话框 选择 双击      更新时间：2023-09-26

我的网页中有一个input[type="file"]，当打开文件对话框并双击选择一个文件时，会触发mouseup事件。但是，如果我选择文件，然后单击打开按钮进行选择，则没有额外的事件。

这种行为是Firefox特有的，我在Chrome、IE和Opera中测试过，没有额外的mouseup事件。此外，没有mousedown事件，因此日志将有两个连续的mouseup事件。

HTML:

<input type="file" />

JavaScript:

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

这是一把小提琴，你可以在那里看到这种行为。要在操作中查看它，请确保文件对话框位于jsfiddle页面的Result框上方。

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

编辑：这个问题出现在我的Firefox（Win7 64位上的32.0.1版本）上，但在Linux中的Firefox 32.0上没有。

当我对此进行深入研究时，我意识到这种行为会创建一个在mousedown事件之后不会触发的杂散mouseup事件。

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

我已经尝试了您的代码。我认为没有标志值是很困难的，因为当双击文件时，在释放第二次点击之前，菜单将关闭，它将触发"鼠标向上"事件。我已经通过使用标志值解决了这个问题。请查看此小提琴。

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

感谢

相关文章：