Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Erst bei Doppelklick springen
#1
Hallo zusammen,

ich habe ein schönes Element auf einer Website bei welchem mit 'onmouseover' und 'onmouseout' ein Bildwechsel durchgeführt wird um zusätzliche Informationen anzuzeigen, und nach einem Klick auf das jeweilige Bild zu der zugehörigen Seite gesprungen wird. Soweit, so gut.

Nun wurde mir mitgeteilt, dass man dieses Element mit Touchscreen-Geräten nicht wie gewünscht bedienen könne.

Nun möchte ich mit einem Einzelklick den Bildwechsel durchführen und bei einem Doppelklick auf die zugehörige Seite springen.

Mit 'onmousedown' bzw. 'onmouseup' im Image-Tag konnte ich den Bildwechsel einbauen, doch der Sprung bei Doppelklick ('ondblclick' im Link-Tag) funktioniert nicht.

Wie müsste man diese Anforderung korrekt darstellen, damit es wie beschrieben funktioniert? Vielleicht ist ja auch ein verzögerter Sprung eine zusätzliche Möglichkeit.

Ich bin für jede Anregung dankbar.

Gruß Tino
Zitieren
#2
Hallo Tino,

genau verstehe ich zwar nicht, was dein Element so alles kann (ein Beispiel und ein Link wären hilfreich), aber ich würde dir dazu raten, dass du für Touch-Devices einfach andere JavaScript-Funktionen verwendest.

Mit folgendem JavaScript kannst du überprüfen, ob ein Endgerät Touch unterstützt und dann ggfs. unterschiedliche Funktionen verwenden:

Code:
if( isEventSupported('touchstart') == true ) {
  /* hier kommt alles für Touch-Geräte rein */
} else {
  /* und hier alles für Geräte, die kein Touch unterstützen */
}

var isEventSupported = (function(){
  var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
  }
  function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
      el.setAttribute(eventName, 'return;');
      isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
  }
  return isEventSupported;
})();

Dann hast du die Möglichkeit komplett unabhängige Funktionsweisen zu definieren und muss auch keine Browser abfragen. Das ganze baut auch nicht auf einem JS-Framework auf und kann somit in Kombination mit allen Frameworks verwendet werden.

Vielleicht hilft dir das ja schon etwas weiter. Viel Erfolg weiterhin und
viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste