2010-12-09 6 views
3

Ich entwickle eine Webanwendung, die einen generischen Dateibrowser für den Desktop, aber für hochgeladene Dateien emuliert. Es bietet dem Benutzer mehrere "Ansichten" für einen Ordner, z. B. Liste, Details und Miniaturansichten. Es ermöglicht ihnen, ihre Umschalt- und Strg-Klick-Kombinationen zu verwenden, um mehrere Dateien auf einmal für Massen-Dateioperationen auszuwählen, ähnlich einem herkömmlichen Dateibrowser.Opera's Strg-Klick deaktivieren, um ein Bild programmatisch zu speichern?

Leider ist das Standardverhalten von Opera, ein Bild herunterzuladen, wenn Sie bei gedrückter STRG-Taste darauf klicken, wodurch das Mehrfachauswahl-Symbol STRG-Klicken in der Miniaturansicht ruiniert wird.

Ich bin mir bewusst, dass Opera können Sie dies für Ihren eigenen Browser deaktivieren, aber aus einer UX-Perspektive möchte ich vermeiden, eine Nachricht auf der Seite zu platzieren, die Benutzer, wie das zu tun, oder noch schlimmer, dass Opera-Benutzern diese Mehrfachauswahl nicht angeboten wird.

Gibt es vielleicht ein Meta-Tag oder eine Javascript-Zauberei, die ich benutzen kann, um Opera zu sagen, dass sie ein Bild nicht herunterladen soll, wenn ein Benutzer mit Strg-Klick darauf klickt?

+0

Klicken Sie auf eine Datei und wählen Sie separate Aktionen? –

+0

@ Álvaro, Ein normaler einzelner Linksklick ohne Modifikatoren wählt eine Datei aus. Durch Klicken bei gedrückter Umschalttaste werden alle Dateien zwischen dem zuletzt ausgewählten und dem geklickten Shift ausgewählt. Wenn Sie bei gedrückter Strg-Taste auf klicken, wird eine Auswahl aus einzelnen Dateien hinzugefügt oder entfernt. Genau wie normale Dateibrowser funktionieren. – Pewpewarrows

+0

JavaScript ist nicht dazu gedacht, diese Art von Dingen zu tun - und es wäre sicherlich nicht angenehm, das Standardverhalten zu ändern, wenn beispielsweise ein Benutzer wirklich beabsichtigt, Strg-Klick zu verwenden, um das Bild zu speichern. – casablanca

Antwort

2

Hier ist ein kleiner Code-Schnipsel, die das Problem (Bitte beachten Sie, es ist ein schneller Test und es funktioniert nicht in IE) zeigt: auf einem Bild

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

Wenn Sie Ctrl + Klick Opera „Speicher öffnen als Dialog "nur weil es ein Tag ist. Es ist erwähnenswert, dass regelmäßige Absage der Veranstaltung nicht funktioniert:

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

Hintergrundbilder scheinen nicht betroffen:

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

Also meine beste Abhilfe so weit ist, anstatt <img> anderen Tag zu verwenden. Ich melde mich zurück, wenn ich etwas Besseres finde.

+0

Arbeitete perfekt! Vielen Dank. – Pewpewarrows