Ich arbeite an einer mobilen Website, die auf einer Vielzahl von Geräten funktionieren muss. Die, die mir im Moment Kopfschmerzen bereiten, sind BlackBerry.

Wir müssen sowohl Tastaturklicks als auch Berührungsereignisse unterstützen.

Idealerweise würde ich nur verwenden:

$thing.click(function(){...})

Das Problem ist jedoch, dass einige dieser Blackberry-Geräte eine sehr ärgerliche Verzögerung vom Zeitpunkt der Berührung bis zum Auslösen eines Klicks aufweisen.

Das Mittel ist, stattdessen Touchstart zu verwenden:

$thing.bind('touchstart', function(event){...})

Aber wie gehe ich vor, um beide Ereignisse zu binden, aber nur eines auszulösen? Ich benötige das Klickereignis weiterhin für Tastaturgeräte, möchte aber natürlich nicht, dass das Klickereignis ausgelöst wird, wenn ich ein Touch-Gerät verwende.

Eine Bonusfrage: Gibt es überhaupt eine Möglichkeit, dies zu tun und zusätzlich Browser aufzunehmen, die nicht einmal ein Touchstart-Ereignis haben? Es sieht so aus, als ob BlackBerry OS5 Touchstart nicht unterstützt und sich daher auch auf Klickereignisse für diesen Browser verlassen muss.

NACHTRAG:

Vielleicht ist eine umfassendere Frage:

Ist es mit jQuery möglich / empfohlen, sowohl Berührungsinteraktionen als auch Mausinteraktionen mit denselben Bindungen zu behandeln?

Im Idealfall lautet die Antwort ja. Wenn nicht, habe ich einige Optionen:

1) Wir verwenden WURFL, um Geräteinformationen abzurufen und so unsere eigene Gerätematrix zu erstellen. Je nach Gerät verwenden wir Touchstart ODER Klicken.

2) Erkennen Sie die Touch-Unterstützung im Browser über JS (ich muss noch etwas darüber recherchieren, aber es scheint, dass dies machbar ist).

Damit bleibt jedoch noch ein Problem: Was ist mit Geräten, die BEIDE unterstützen? Einige der von uns unterstützten Telefone (nämlich Nokias und BlackBerries) verfügen sowohl über Touchscreens als auch über Tastaturen. Damit schließt sich der Kreis zurück zur ursprünglichen Frage ... gibt es eine Möglichkeit, beides irgendwie gleichzeitig zuzulassen?

Update : Schauen Sie sich das jQuery Pointer Events Polyfill- Projekt an, mit dem Sie an "Zeiger" -Ereignisse binden können, anstatt zwischen Maus und Berührung zu wählen.

Binden Sie an beide, aber machen Sie ein Flag, damit die Funktion nur einmal pro 100 ms oder so ausgelöst wird.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Dies ist das Update, das ich "erstelle" und das den GhostClick entfernt und den FastClick implementiert. Probieren Sie es selbst aus und lassen Sie uns wissen, ob es für Sie funktioniert hat.

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

Sie könnten so etwas versuchen:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Normalerweise funktioniert das auch:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Nur das Hinzufügen return false;am Ende der on("click touchstart")Ereignisfunktion kann dieses Problem lösen.

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

Aus der jQuery-Dokumentation zu .on ()

Wenn Sie falsevon einem Ereignishandler zurückkehren, wird automatisch event.stopPropagation()und aufgerufen event.preventDefault(). Ein falseWert kann auch für den Handler als Abkürzung für übergeben werden function(){ return false; }.

Ich musste etwas Ähnliches tun. Hier ist eine vereinfachte Version dessen, was für mich funktioniert hat. Wenn ein Berührungsereignis erkannt wird, entfernen Sie die Klickbindung.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

In meinem Fall war das <a>Klickereignis an ein Element gebunden, sodass ich die Klickbindung entfernen und ein Klickereignis erneut binden musste, wodurch die Standardaktion für das <a>Element verhindert wurde.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

Es gelang mir auf folgende Weise.

Kinderleicht...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Ich glaube, die beste Vorgehensweise ist jetzt:

$('#object').on('touchend mouseup', function () { });

Touchend

Das Touchend-Ereignis wird ausgelöst, wenn ein Touchpoint von der Touch-Oberfläche entfernt wird.

Die touchend Veranstaltung wird nicht alle Mausereignisse ausgelöst werden .

---

mouseup

Das Mouseup-Ereignis wird an ein Element gesendet, wenn sich der Mauszeiger über dem Element befindet und die Maustaste losgelassen wird. Jedes HTML-Element kann dieses Ereignis empfangen.

Die mouseup Veranstaltung wird nicht alle Touch - Ereignisse auslösen.

BEISPIEL

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

BEARBEITEN (2017)

Ab 2017 können Browser, die mit Chrome beginnen und Schritte unternehmen, um das Klickereignis .on("click")für Maus und Berührung kompatibler zu machen, die Verzögerung beseitigen, die durch Tippereignisse bei Klickanforderungen entsteht.

Dies führt zu der Schlussfolgerung, dass die Rückkehr zur Verwendung nur des Klickereignisses die einfachste Lösung für die Zukunft wäre.

Ich habe noch keine Cross-Browser-Tests durchgeführt, um festzustellen, ob dies praktisch ist.

Im Allgemeinen möchten Sie die Standard-Touch- und Non-Touch-API (Klick) nicht mischen. Sobald Sie sich in der Welt der Berührung befinden, ist es einfacher, sich nur mit den berührungsbezogenen Funktionen zu befassen. Unten finden Sie einen Pseudocode, der genau das tut, was Sie möchten.

Wenn Sie im Touchmove-Ereignis eine Verbindung herstellen und die Positionen verfolgen, können Sie der doTouchLogic-Funktion weitere Elemente hinzufügen, um Gesten und so weiter zu erkennen.

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

Überprüfen Sie die schnellen Schaltflächen und Chost-Klicks von Google https://developers.google.com/mobile/articles/fast_buttons

Nun ... All dies ist super kompliziert.

Wenn Sie modernizr haben, ist es ein Kinderspiel.

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

Eine weitere Implementierung für eine bessere Wartung. Diese Technik führt jedoch auch event.stopPropagation () aus. Der Klick wird von keinem anderen Element erfasst, das 100 ms lang geklickt hat.

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

Nur zu Dokumentationszwecken habe ich Folgendes getan, um den schnellsten / reaktionsschnellsten Klick auf den Desktop / Tippen auf eine mobile Lösung zu erzielen, die mir einfällt:

Ich habe die Funktion von jQuery ondurch eine modifizierte ersetzt, die, wenn der Browser Berührungsereignisse unterstützt, alle meine Klickereignisse durch Berührungsstart ersetzte.

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

Verwendung als wäre genau die gleiche wie zuvor, wie:

$('#my-button').on('click', function(){ /* ... */ });

Aber es würde Touchstart verwenden, wenn verfügbar, klicken Sie, wenn nicht. Keine Verzögerungen jeglicher Art erforderlich: D.

Ich hatte gerade die Idee, mir zu merken, ob ontouchstartes jemals ausgelöst wurde. In diesem Fall befinden wir uns auf einem Gerät, das dies unterstützt, und möchten das onclickEreignis ignorieren . Da ontouchstartsollte immer vorher ausgelöst werden onclick, benutze ich dies:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Sie könnten es so versuchen:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

In meinem Fall hat das perfekt funktioniert:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

Das Hauptproblem war, als ich stattdessen mit einem Mausklick versuchte, auf Touch-Geräten Klick und Touchend gleichzeitig auszulösen. Wenn ich den Klick-Off verwende, funktionierten einige Funktionen auf Mobilgeräten überhaupt nicht. Das Problem beim Klicken ist, dass es sich um ein globales Ereignis handelt, das den Rest des Ereignisses einschließlich Touchend auslöst.

Das hat bei mir funktioniert, Mobile hört auf beide, also verhindere das, was das Touch-Ereignis ist. Desktop nur Maus hören.

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

Da ich für mich die beste Antwort von Mottie bin, versuche ich nur, seinen Code wiederverwendbarer zu machen. Das ist also mein Beitrag:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

Ich arbeite auch an einer Android / iPad-Web-App, und es scheint, dass die Verwendung von "touchmove" ausreicht, um "Komponenten zu verschieben" (kein Touchstart erforderlich). Durch Deaktivieren von Touchstart können Sie .click () verwenden. von jQuery. Es funktioniert tatsächlich, weil es nicht durch Touchstart überlastet wird.

Schließlich können Sie binb .live ("touchstart", Funktion (e) {e.stopPropagation ();}); Um das Touchstart-Ereignis zu bitten, die Ausbreitung zu stoppen, klicken Sie im Wohnzimmer auf (), um ausgelöst zu werden.

Es hat bei mir funktioniert.

Bei der Lösung dieses Problems sind viele Dinge zu beachten. Die meisten Lösungen unterbrechen entweder das Scrollen oder behandeln Ghost-Click-Ereignisse nicht richtig.

Eine vollständige Lösung finden Sie unter https://developers.google.com/mobile/articles/fast_buttons

NB: Sie können Ghost-Click-Ereignisse nicht pro Element verarbeiten. Ein verzögerter Klick wird nach Bildschirmposition ausgelöst. Wenn Ihre Berührungsereignisse die Seite auf irgendeine Weise ändern, wird das Klickereignis an die neue Version der Seite gesendet.

Es kann effektiv sein, die Ereignisse zuzuordnen 'touchstart mousedown'oder 'touchend mouseup'unerwünschte Nebenwirkungen der Verwendung zu vermeiden click.

Unter Ausnutzung der Tatsache, dass ein Klick immer auf ein Berührungsereignis folgt, habe ich Folgendes getan, um den "Geisterklick" zu beseitigen, ohne Zeitüberschreitungen oder globale Flags verwenden zu müssen.

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

Grundsätzlich wird jedes Mal, wenn ein ontouchstartEreignis auf das Element ausgelöst wird, ein Flag gesetzt und anschließend entfernt (und ignoriert), wenn der Klick erfolgt.

Warum nicht die jQuery-Ereignis-API verwenden?

http://learn.jquery.com/events/event-extensions/

Ich habe dieses einfache Ereignis mit Erfolg genutzt. Es ist sauber, namenreich und flexibel genug, um es zu verbessern.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

Wenn Sie jQuery verwenden, hat Folgendes für mich ziemlich gut funktioniert:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

Andere Lösungen sind ebenfalls gut, aber ich habe mehrere Ereignisse in einer Schleife gebunden und benötigte die selbstaufrufende Funktion, um einen geeigneten Abschluss zu erstellen. Außerdem wollte ich die Bindung nicht deaktivieren, da ich wollte, dass sie beim nächsten Klick / Touchstart aufgerufen werden kann.

Könnte jemandem in einer ähnlichen Situation helfen!

Für einfache Funktionen erkennen Sie einfach Berührung oder klicken Sie auf Ich verwende den folgenden Code:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

Dies gibt "touch" zurück, wenn das touchstart-Ereignis definiert ist, und "no touch", wenn nicht. Wie ich bereits sagte, ist dies ein einfacher Ansatz für Click / Tap-Ereignisse.

Ich versuche dies und bis jetzt funktioniert es (aber ich bin nur auf Android / Phonegap also Vorbehalt Emptor)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

Ich mag die Tatsache nicht, dass ich Handler bei jeder Berührung neu binde, aber alles, was als Berührungen betrachtet wird, kommt nicht sehr oft vor (in der Computerzeit!)

Ich habe eine TONNE Handler wie den für '#keypad'. Eine einfache Funktion, mit der ich das Problem ohne zu viel Code lösen kann, ist der Grund, warum ich diesen Weg gegangen bin.

Versuchen Sie , verwenden Virtual Mouse (vmouse) Bindingsaus jQuery Mobile. Es ist ein virtuelles Ereignis speziell für Ihren Fall:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Browser-Support-Liste: http://jquerymobile.com/browser-support/1.4/

EDIT: Meine frühere Antwort (basierend auf den Antworten in diesem Thread) war nicht der richtige Weg für mich. Ich wollte, dass ein Untermenü beim Eingeben oder Klicken mit der Maus erweitert und beim Verlassen der Maus oder einem anderen Klick ausgeblendet wird. Da Mausereignisse normalerweise nach Berührungsereignissen ausgelöst werden, war es schwierig, Ereignis-Listener zu schreiben, die sowohl Touchscreen- als auch Mauseingaben gleichzeitig unterstützen.

jQuery-Plugin: Berühren oder Maus

Am Ende habe ich ein jQuery-Plugin namens " Touch Or Mouse " (897 Byte minimiert) geschrieben, das erkennen kann, ob ein Ereignis von einem Touchscreen oder einer Maus aufgerufen wurde (ohne auf Touch-Unterstützung zu testen!). Dies ermöglicht die Unterstützung von sowohl Touchscreen und Maus gleichzeitig und vollständig trennen ihre Veranstaltungen.

Auf diese Weise kann das OP Touch-Klicks und Klicks, die nur von einer Maus aufgerufen werden, verwenden touchstartoder touchendschnell darauf reagieren .click

Demonstration

Zuerst muss man also machen. das Körperelement verfolgt Berührungsereignisse:

$(document.body).touchOrMouse('init');

$body.touchOrMouse('get', e)Mausereignisse sind standardmäßig an Elemente gebunden. Durch Aufrufen können wir herausfinden, ob das Ereignis über einen Touchscreen oder eine Maus aufgerufen wurde.

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Siehe das Plugin bei der Arbeit unter http://jsfiddle.net/lmeurs/uo4069nh .

Erläuterung

1. Dieses Plugin muss also aufgerufen werden. das Körperelement zu verfolgen touchstartund touchendEreignisse, auf diese Weise das touchendEreignis nicht auf dem Auslöseelement gebrannt werden muss (dh. ein Link oder eine Schaltfläche). Zwischen diesen beiden Berührungsereignissen betrachtet dieses Plugin jedes Mausereignis als durch Berühren aufgerufen.
2. touchendMausereignisse werden erst ausgelöst , nachdem ein Mausereignis innerhalb der ghostEventDelayOption (Option 1000 ms standardmäßig) ausgelöst touchendwurde. Dieses Plugin betrachtet das Mausereignis als durch Berühren aufgerufen.
3. Wenn Sie über einen Touchscreen auf ein Element klicken, erhält das Element den :activeStatus. Das mouseleaveEreignis wird erst ausgelöst, nachdem das Element diesen Zustand um dh verloren hat. Klicken Sie auf ein anderes Element. Da dies Sekunden (oder Minuten!) Nach dem mouseenterAuslösen des Ereignisses sein kann, verfolgt dieses Plugin das letzte mouseenterEreignis eines Elements : Wenn das letzte mouseenterEreignis durch Berühren aufgerufen wurde, gilt das folgende mouseleaveEreignis auch als durch Berühren aufgerufen.

Hier ist eine einfache Möglichkeit, dies zu tun:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

Grundsätzlich speichern Sie den ersten Ereignistyp, der ausgelöst wird, in der Eigenschaft 'trigger' im Datenobjekt von jQuery, das an das Stammdokument angehängt ist, und führen ihn nur aus, wenn der Ereignistyp dem Wert in 'trigger' entspricht. Auf Touch-Geräten lautet die Ereigniskette wahrscheinlich "Touchstart", gefolgt von "Klicken". Der 'click'-Handler wird jedoch nicht ausgeführt, da "click" nicht mit dem ursprünglichen Ereignistyp übereinstimmt, der in' trigger '("touchstart") gespeichert ist.

Die Annahme, und ich glaube, es ist sicher, ist, dass Ihr Smartphone nicht spontan von einem Touch-Gerät zu einem Mausgerät wechselt oder dass sich der Tipp niemals registriert, da der Ereignistyp "Auslöser" nur einmal pro gespeichert wird Seitenladen und "Klicken" würden niemals mit "Touchstart" übereinstimmen.

Hier ist ein Codepen, mit dem Sie herumspielen können (versuchen Sie, auf einem Touch-Gerät auf die Schaltfläche zu tippen - es sollte keine Klickverzögerung geben): http://codepen.io/thdoan/pen/xVVrOZ

Ich habe dies auch als einfaches jQuery-Plugin implementiert, das auch das Filtern von Nachkommen von jQuery durch Übergeben einer Auswahlzeichenfolge unterstützt:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

Die beste Methode, die ich gefunden habe, besteht darin, das Berührungsereignis zu schreiben und dieses Ereignis das normale Klickereignis programmgesteuert aufrufen zu lassen. Auf diese Weise haben Sie alle Ihre normalen Klickereignisse und müssen dann nur einen Ereignishandler für alle Berührungsereignisse hinzufügen. Fügen Sie für jeden Knoten, den Sie berührbar machen möchten, einfach die Klasse "berührbar" hinzu, um den Berührungshandler aufzurufen. Mit Jquery funktioniert es mit einer gewissen Logik, um sicherzustellen, dass es sich um ein echtes Berührungsereignis und nicht um ein falsches Positiv handelt.

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});