jQuery-click-Ereignis - Wie zu sagen, wenn die Maus geklickt oder die EINGABETASTE gedrückt wurde?

Habe ich ein usability-Problem auf einer Website von mir. Ich habe eine Reihe von Registerkarten, die jeweils eine form. Wenn Sie klicken Sie auf die Registerkarte link, es gibt den focus auf die erste textbox in der Registerkarte Inhalt Körper. Maus-orientierte Menschen Liebe dieses "feature". Das problem ist, wenn die Tastatur-orientierte Anwender mit der TAB-Taste auf Ihrer Tastatur, um durch die Registerkarten. Sie drücken Sie die EINGABETASTE auf der Registerkarte, die Sie betrachten möchten, das click-Ereignis ausgelöst, und die Registerkarte zeigt nach oben, aber der Fokus wird auf das Textfeld, die Anpassung Ihrer tab-Reihenfolge komplett. Also, wenn Sie auf die tab-Taste, die Sie möchten, gehen Sie auf die nächste Registerkarte auf dem Bildschirm, aber da der Fokus wurde verschoben in das Formular ein, Sie können nicht leicht an die nächste Registerkarte über die Tastatur.

So, im click-Ereignis brauche ich, um zu bestimmen, wenn Sie tatsächlich angeklickt haben es mit einer Maus-Taste. Ist das möglich? Mein Erster Versuch war dieser:

$("#tabs li a").click(function(e) {
  var tab = $(this.href);
  if(e.keyCode != 13)
    $("input:first", tab).focus();
});

Aber keyCode ist immer 0. Die which Eigenschaft ist auch immer 0. Bitte um Hilfe!!

Wahrscheinlich können Sie die hacken rund um es, indem Sie ein .focus () - handler auf das Textfeld mit ein wenig Logik.
Äh, nicht wirklich. Sobald Augenmerk auf die textbox/dropdown ist es zu spät, sich zu erholen.
haha. dies ist eine schwierige Frage.
Ich glaube, ich habe es... siehe meine Antwort
Mit der rechten auf. Ich würde vorschlagen, so etwas wie, dass aber nicht wissen, wenn keydown-feuert, bevor Sie klicken. Gut zu wissen.
Es ist ein wenig hacky, aber Sie könnten wahrscheinlich prüfen, ob die Maus-position wird oben auf der Registerkarte das war nur geklickt, mit e.pageX und e.pageY.
Mit der Maus über den link, wenn Sie die enter-Taste verwendet wurde, leider. Sicher, es mag unwahrscheinlich sein, aber die ultimative Lösung ist zwingend in diesem Fall.

InformationsquelleAutor Josh Stodola | 2011-09-12

4

Hier ist die Lösung, die ich kam mit, es ist überraschend einfach. Ich gefangen keydown auf die Registerkarte links, und das click-Ereignis ausgelöst, wenn der keyCode 13 war. Zum Glück, die trigger - Funktion ermöglicht es uns, übergeben Sie zusätzliche Parameter an die event-handler...
```
$("#tabs li a").keydown(function(e) {
  if(e.keyCode == 13) {
    $(this).trigger("click", true);
    e.preventDefault();
  }
});
```
So, ich hatte gerade meine click-handler zu erhalten, die neuen parameter, und verwenden Sie es...
```
$("#tabs li a").click(function(e, enterKeyPressed) {
  if(enterKeyPressed)
    alert("Enter key");
  else
    alert("Clicked");
});
```
Habe ich eine demo auf jsFiddle als gut. Vielen Dank an alle, die es Lesen, die Frage zu stellen.
- ich beende das gleiche zu tun, etwa 4 Minuten, wir sind Genie =P
InformationsquelleAutor Josh Stodola
0

Wäre eine Globale "focus" variable arbeiten, die deaktivieren den Fokus auf Maus-Einstellung nach der Registerkarte Auslastung auf einen bestimmten tab, bis eine Maus bewegt wird, um einen neuen block.

Wäre dies nicht die Funktion Ihr anfordern, aber ich glaube, es könnte Sie geben, was Sie suchen.

zB. Maus hoovers option 5 drücken Sie tab, jetzt speichern Sie die 5 in der Variablen, die Nichtanerkennung der Fokus auf 5 bis etwas anderes konzentriert ist, aber so bald etwas anderes konzentriert, global und drehte sich wieder zu -1.

Nicht die sauberste workaround, ich gebe zu, dass frei.
- Ich kann es nicht haben, dass viele event-Handler geht... diese Formen sind groß. Diese sperren, der browser, sicher.
InformationsquelleAutor Taoh

Sogar eine noch einfachere Lösung, die für mich gearbeitet wurde, um gerade zu überprüfen, ob es irgendwelche Maus-Koordinaten übergeben mit der Veranstaltung.

document.addEventListener('click', function(e) {
        //if the event object is passed with mouse coordinates, 
        if(e.screenX && e.screenY){
            //The mouse was clicked
        }else{//The enter key was pressed}

});

InformationsquelleAutor user2192333

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.