Деактивиране на Ctrl-щракване на 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
@Álvaro, нормално единично щракване с ляв бутон без модификатори избира файл. Щракването с 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