All geek questions in one place

Disable Opera Ctrl-Click to save image programmatically?

I am developing a web application that emulates a common file browser for the desktop, but for downloaded files. It offers the user several “views” for a folder, such as a list, parts, and thumbnails. This allows them to use the Shift and Ctrl combinations to simultaneously select multiple files for bulk file operations, similar to a traditional file browser.

Unfortunately, Opera's default behavior is to load the image when you press Ctrl-Click, which disrupts the multi-click Ctrl-click in thumbnail view.

I know that Opera allows you to disable this for your own browser, but from the point of view of UX, I would like you to not have to post a message on the page that instructed users on how to do this or, even worse, to not offer this feature for multiple Opera users.

Maybe there is a meta tag or some kind of javascript-wizardry that I can use to tell Opera not to load the image when the user is Ctrl-Click?

+3
source share
1 answer

Here is a small piece of code that illustrates the problem (pay attention to a quick test, and it does not 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>

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>. , - .

+2

Source: https://habr.com/ru/post/1779419/

More articles:


All Articles