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

发布于 2024-10-06 12:24:09 字数 382 浏览 6 评论 0原文

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

不幸的是，Opera 的默认行为是在您按住 Ctrl 键单击图像时下载图像，这会破坏在缩略图视图中按住 Ctrl 键单击多选的功能。

我知道 Opera 允许您为自己的浏览器禁用此功能，但从用户体验的角度来看，我希望避免在页面上放置一条消息来指导用户如何执行此操作，或者更糟糕的是，不必提供Opera 用户可以使用多选功能。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-10-13 12:24:09

下面是一个说明问题的小代码片段（请注意，这是一个快速测试，在 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 会打开“另存为对话框”，只是因为它是标签。值得注意的是，常规事件取消不起作用：

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>

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

Here's a little code snippet that illustrates the issue (please note it's a quick test and it doesn't work in 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>

When you Ctrl+click on a picture Opera opens a "Save as dialogue" only because it is an <img> tag. It's worth noting that regular event cancellation does not work:

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

Background images do not seem affected:

<!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>

So my best workaround so far is to use any other tag instead of <img>. I'll report back if I find something better.

回复收藏 0 原文

~没有更多了~