CODEWITHSUNDEEP
javascripthtmlopera
Pewpewarrows
Pewpewarrows

Reputation: 833

Disable Opera's Ctrl-Click to Save an Image Programmatically?

I'm developing a web app that emulates a generic file browser for the desktop, but for uploaded files. It offers the user multiple "views" for a folder, such as list, details, and thumbnails. It allows them to use their Shift and Ctrl click combinations for selecting multiple files at once for bulk file operations similar to a traditional file browser.

Unfortunately, Opera's default behavior is to download an image when you Ctrl-Click on it, which ruins the Ctrl-Click multi-select while in the thumbnails view.

I'm aware that Opera allows you to disable this for your own browser, but from a UX perspective I'd like to avoid having to place a message on the page instructing users how to do that, or even worse, having to not offer that multi-select feature to Opera users.

Is there perhaps a meta tag or some javascript wizardry I can use to tell Opera not to download an image when a user Ctrl-Clicks it?

Upvotes: 4

Views: 1352

Answers (1)

Álvaro González
Álvaro González

Reputation: 146588

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.

Upvotes: 2

Related Questions