Question

我正在开发一个Web应用程序，它模拟桌面的通用文件浏览器，但用于上传的文件。它为用户提供文件夹的多个“视图”，例如列表，详细信息和缩略图。它允许他们使用Shift和Ctrl单击组合一次选择多个文件，以进行与传统文件浏览器类似的批量文件操作。

不幸的是，Opera的默认行为是在按住Ctrl键的同时下载图像，这会在缩略图视图中破坏Ctrl-Click多选图像。

我知道Opera允许您为自己的浏览器禁用此功能，但从UX的角度来看，我希望避免在页面上发送消息，指示用户如何执行此操作，或者更糟糕的是，不向Opera用户提供多项选择功能。

是否有一个元标记或一些javascript魔法我可以用来告诉Opera在用户按住Ctrl键的时候不下载图像？

Answer 1

这是一个说明问题的小代码片段（请注意它是一个快速测试，它在IE中不起作用）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
.selected{
    border: 3px solid navy;
}
--></style>
<script type="text/javascript"><!--
window.onload = function(){
    var pictures = document.getElementsByTagName("img");
    for(var i=0, len=pictures.length; i<len; i++){
        pictures[i].onclick = function(e){
            e.target.className = e.target.className=="selected" ? "" : "selected";
        }
    }
}
//--></script>
</head>
<body>

<ul>
    <li><img src="http://www.gravatar.com/avatar/684a6ebc2185161978cefc855e2b20b4?s=32&d=identicon&r=PG" width="32" height="32" alt="" title=""></li>
    <li><img src="http://www.gravatar.com/avatar/684a6ebc2185161978cefc855e2b20b4?s=32&d=identicon&r=PG" width="32" height="32" alt="" title=""></li>
    <li><img src="http://www.gravatar.com/avatar/684a6ebc2185161978cefc855e2b20b4?s=32&d=identicon&r=PG" width="32" height="32" alt="" title=""></li>
</ul>

</body>
</html>

当您按住Ctrl键并单击图片时，Opera会打开“另存为对话框”，因为它是<img>标记。值得注意的是，定期事件取消不起作用：

e.preventDefault();
e.stopPropagation();

背景图片似乎没有受到影响：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
.selected{
    border: 3px solid navy;
}
div{
    width: 32px;
    height: 32px;
    background: white url(http://www.gravatar.com/avatar/684a6ebc2185161978cefc855e2b20b4?s=32&d=identicon&r=PG) left top no-repeat;
}
--></style>
<script type="text/javascript"><!--
window.onload = function(){
    var pictures = document.getElementsByTagName("div");
    for(var i=0, len=pictures.length; i<len; i++){
        pictures[i].onclick = function(e){
            e.target.className = e.target.className=="selected" ? "" : "selected";
        }
    }
}
//--></script>
</head>
<body>

<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

</body>
</html>

所以到目前为止，我最好的解决方法是使用任何其他标记而不是<img>。如果我找到更好的东西，我会报告。

禁用Opera的Ctrl-Click以编程方式保存图像？

1 个答案: