Отключить Ctrl-Click Opera для программного сохранения изображения?

Я разрабатываю веб-приложение, которое эмулирует универсальный файловый браузер для рабочего стола, но для загруженных файлов. Он предлагает пользователю несколько «представлений» для папки, таких как список, подробности и эскизы. Это позволяет им использовать комбинации клавиш Shift и Ctrl для одновременного выбора нескольких файлов для массовых операций с файлами, аналогичных традиционному файловому браузеру.

К сожалению, Opera по умолчанию загружает изображение, когда вы щелкаете по нему, удерживая нажатой клавишу Ctrl, что разрушает множественный выбор, удерживаемый при нажатой клавише Ctrl, в режиме просмотра эскизов.

Я знаю, что Opera позволяет вам отключить это для вашего собственного браузера, но с точки зрения UX я хотел бы избежать необходимости размещать на странице сообщение, инструктирующее пользователей, как это сделать, или, что еще хуже, не предлагать эту функцию множественного выбора для пользователей Opera.

Возможно, есть метатег или какое-то волшебство javascript, которое я могу использовать, чтобы сказать Opera не загружать изображение, когда пользователь Ctrl-щелкает его?


javascript html opera
person Pewpewarrows    schedule 09.12.2010    source источник
comment
Щелчок по файлу и его выбор — это отдельные действия?   -  person Álvaro González    schedule 09.12.2010
comment
@ Альваро, обычный одиночный щелчок левой кнопкой мыши без модификаторов выбирает файл. Щелчок с нажатой клавишей Shift выбирает все файлы между самым последним выбранным и тем, который был нажат с нажатой клавишей Shift. Щелчок с нажатой клавишей Ctrl либо добавляет, либо снимает выделение с отдельных файлов. Именно так работают обычные файловые браузеры.   -  person Pewpewarrows    schedule 09.12.2010
comment
JavaScript не предназначен для таких вещей — и, конечно, было бы нехорошо изменить поведение по умолчанию, когда, например, пользователь действительно намеревается использовать Ctrl-щелчок, чтобы сохранить изображение.   -  person casablanca    schedule 09.12.2010
comment
Вы пытались прикрепить обработчик кликов и вернуть false?   -  person Amir Raminfar    schedule 09.12.2010

Ответы (1)


arrow_upward
2
arrow_downward

Вот небольшой фрагмент кода, иллюстрирующий проблему (обратите внимание, что это быстрый тест, и он не работает в 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>. Я отчитаюсь, если найду что-то лучше.

person Álvaro González    schedule 09.12.2010