Javascript mit jQuery: Klicken Sie und doppelklicken Sie auf dasselbe Element, unterschiedliche Wirkung, eine deaktiviert die andere

Habe ich eine interessante situation - ich habe eine Zeile in der Tabelle, die zur Zeit, zeigt, dass es versteckte Gegenstück, wenn ich auf die "Erweitern" Taste. Das original (sichtbaren) Zeile, die enthält die Schaltfläche "erweitern" hat auch einige Inhalte in einer bestimmten Zelle, die, wenn Sie angeklickt wird, wird editierbar. Ich möchte Los zu sein, die Schaltfläche erweitern und aktivieren Sie den ausbau der Zeile per Doppelklick irgendwo in der Zeile selbst, einschließlich Feld, dreht bearbeitet werden, wenn Sie darauf klicken. Können Sie riechen die Mühe hier schon.

Wenn ich doppelt auf eine Zeile, zwei click-Ereignisse ausgelöst werden, bevor das dblclick tritt. Dies bedeutet, wenn ich doppelt auf das Feld klicken, es wird in eine editierbare ein, und die Zeile zu erweitern. Ich möchte, dies zu verhindern. Ich will das doubleclick-um zu verhindern, dass die Entlassung des einzigen Klick, und das mit nur einem Mausklick führen Sie wie gewohnt.

Über das Ereignis.stopPropagation() klar wird nicht funktionieren, da Sie von zwei verschiedenen Ereignissen.

Irgendwelche Ideen?

Bearbeiten (einige halb-pseudo-code):

Original version:

<table>
    <tbody>
        <tr>
            <td><a href="javascript:$('#row_to_expand').toggle();" title="Expand the hidden row">Expand Row</a></td>
            <td>Some kind of random data</td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third editable value") ?></td>
            <!-- ... -->
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]->value("Nth editable value") ?></td>
        </tr>
        <tr style="display: none" id="row_to_expand">
            <td colspan="n">Some hidden data</td>
        </tr>
    </tbody>
</table>

Gewünschte version:

<table>
    <tbody>
        <tr ondblclick="$('#row_to_expand').toggle()">
            <td>Some kind of random data</td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third editable value") ?></td>
            <!-- ... -->
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]->value("Nth editable value") ?></td>
        </tr>
        <tr style="display: none" id="row_to_expand">
            <td colspan="n">Some hidden data</td>
        </tr>
    </tbody>
</table>

Cheers

InformationsquelleAutor der Frage Swader | 2011-03-29

23

Die Allgemeine Idee:
1. Auf die erste klicken Sie, bitte rufen Sie die zugehörige Funktion (sagen single_click_function()). Vielmehr stellen Sie einen timer für eine bestimmte Zeit(sagen wir x). Wenn wir nicht bekommen, ein weiterer Klick während dieser Zeitspanne gehen die single_click_function(). Wenn wir das tun bekommen, rufen Sie double_click_function()
2. Timer werden gelöscht, sobald der zweite Klick erhalten. Es wird auch ausgeglichen werden, wenn x Millisekunden hinfällig.
BTW, check Paolo ' s Antwort aus: Muss stornieren, klicken Sie auf/mouseup-Ereignisse, wenn ein Doppelklick-Ereignis erkannt
und natürlich den gesamten thread! 🙂

Bessere Antwort: https://stackoverflow.com/a/7845282/260610

InformationsquelleAutor der Antwort UltraInstinct

Arbeiten demo

$('#alreadyclicked').val('no click');
$('td.dblclickable').on('click',function(){
    var $button=$(this);
    if ($button.data('alreadyclicked')){
        $button.data('alreadyclicked', false); //reset
        $('#alreadyclicked').val('no click');

        if ($button.data('alreadyclickedTimeout')){
            clearTimeout($button.data('alreadyclickedTimeout')); //prevent this from happening
        }
        //do what needs to happen on double click. 
        $('#action').val('Was double clicked');
    }else{
        $button.data('alreadyclicked', true);
        $('#alreadyclicked').val('clicked');
        var alreadyclickedTimeout=setTimeout(function(){
            $button.data('alreadyclicked', false); //reset when it happens
            $('#alreadyclicked').val('no click');
            $('#action').val('Was single clicked');
            //do what needs to happen on single click. 
            //use $button instead of $(this) because $(this) is 
            //no longer the element
        },300); //<-- dblclick tolerance here
        $button.data('alreadyclickedTimeout', alreadyclickedTimeout); //store this id to clear if necessary
    }
    return false;
});

offensichtlich verwenden <td class="dblclickable">

InformationsquelleAutor der Antwort Popnoodles

2

Das Problem tritt nur auf, wenn das Eingabefeld angeklickt wird, so befestigen Sie ein regelmäßiger click handler an das element, die Abbrechen Vermehrung der Veranstaltung (siehe stopPropagation) und ein timeout (setTimeout(...)) für, sagen wir, 600ms (Standard-Zeit zwischen zwei Klicks, um als ein dbl-click ist 500ms [src]). Wenn zu diesem Zeitpunkt die dblclick hat nicht stattgefunden (Sie können eine var zugänglich in beide event-Handler, die fungiert als ein flag, um dies zu erkennen), dann kannst du davon ausgehen, das der Benutzer wünscht, zu erweitern, der Reihe statt, und fahren Sie mit dieser Aktion...

IMO, sollten Sie überdenken dies. Ach, einen einzigen click-handler kann nicht wissen, ob der Benutzer über Doppelklick.

Ich schlage vor, beide Maßnahmen einzigen Klick, und weiß einfach nicht weitergegeben werden aus dem bearbeitbaren Feld, wenn es angeklickt wird.

InformationsquelleAutor der Antwort James

Umschreiben user822711 Antwort für die Wiederverwendung:

  $.singleDoubleClick = function(singleClk, doubleClk) {
    return (function() {
      var alreadyclicked = false;
      var alreadyclickedTimeout;

      return function(e) {
        if (alreadyclicked) {
          //double
          alreadyclicked = false;
          alreadyclickedTimeout && clearTimeout(alreadyclickedTimeout);
          doubleClk && doubleClk(e);
        } else {
          //single
          alreadyclicked = true;
          alreadyclickedTimeout = setTimeout(function() {
            alreadyclicked = false;
            singleClk && singleClk(e);
          }, 300);
        }
      }
    })();
  }

Aufruf der Funktion.

$('td.dblclickable').bind('click', $.singleDoubleClick(function(e){
  //click.
}, function(e){
  //double click.
});

InformationsquelleAutor der Antwort puttyshell

2

Schrieb ich eine einfache jQuery-plugin, dass ermöglicht es Ihnen, eine benutzerdefinierte "singleclick" - Veranstaltung zu unterscheiden zwischen einer Einzel-auf Doppel-klicken. Dies ermöglicht Ihnen die Erstellung einer Schnittstelle, wo eine ein-Klick-macht die Eingabe editierbar, während eine Doppel-klicken Sie auf erweitert. Ähnlich wie der Windows/OSX-Dateisystem umbenennen/open UI.

https://github.com/omriyariv/jquery-singleclick
```
$('#someInput').on('singleclick', function(e) {
    //The event will be fired with a small delay but will not fire upon a double-click.
    makeEditable(e.target);
}

$('#container').on('dblclick', function(e) {
    //Expand the row...
}
```
InformationsquelleAutor der Antwort omriyariv

window.UI = {
  MIN_LAPS_FOR_DBL_CLICK: 200, //msecs

  evt_down:null,
  timer_down:null,
  mousedown:function(evt){
    if( this.evt_down && evt.timeStamp < this.evt_down.timeStamp + this.MIN_LAPS_FOR_DBL_CLICK ){
      clearTimeout(this.timer_down);
      this.double_click(evt); //=> double click
    } else {
      this.evt_down   = evt;
      this.timer_down = setTimeout("UI.do_on_mousedown()", this.MIN_LAPS_FOR_DBL_CLICK);
    }
  },
  evt_up:null,
  timer_up:null,
  mouseup:function(evt){
    if( this.evt_up && evt.timeStamp < this.evt_up.timeStamp + this.MIN_LAPS_FOR_DBL_CLICK ){
      clearTimeout(this.timer_up);
    } else {
      this.evt_up   = evt;
      this.timer_up = setTimeout("UI.do_on_mouseup()", this.MIN_LAPS_FOR_DBL_CLICK);
    }
  },
  do_on_mousedown:function(){
    var evt = this.evt_down;
    //Treatment MOUSE-DOWN here
  },
  do_on_mouseup:function(){
    var evt = this.evt_up;
    //Treatment MOUSE-UP here
  },
  double_click:function(evt){
    //Treatment DBL-CLICK here
  }

}

//Then the observers

$('div#myfoo').bind('mousedown',  $.proxy(UI.mousedown, UI));
$('div#myfoo').bind('mouseup',    $.proxy(UI.mouseup, UI));

InformationsquelleAutor der Antwort Philippe Perret

Hinzufügen Antwort von @puttyshell, dieser code ist Platz für ein visualSingleClick Funktion. Diese laufen vor setTimeout und ist beabsichtigt, um Benutzer einige visual-Aktion für die Aktion, die vor dem timeout, und ich kann einen größeren timeout. Ich bin mit dieser auf einer Google Drive-browsing-Schnittstelle, um zu zeigen Benutzer, der die Datei oder den Ordner, klickte er ausgewählt ist. Google Drive selbst hat etwas ähnliches, aber nicht sah es code.

/* plugin to enable single and double click on same object */
$.singleDoubleClick = function(visualSingleClk, singleClk, doubleClk) {
  return (function() {
    var alreadyclicked = false;
    var alreadyclickedTimeout;

    return function(e) {
      if (alreadyclicked) {
        //double
        alreadyclicked = false;
        alreadyclickedTimeout && clearTimeout(alreadyclickedTimeout);
        doubleClk && doubleClk(e);
      } else {
        //single
        alreadyclicked = true;
        visualSingleClk && visualSingleClk(e);
        alreadyclickedTimeout = setTimeout(function() {
          alreadyclicked = false;
          singleClk && singleClk(e);
        }, 500);
      }
    }
  })();
}

InformationsquelleAutor der Antwort chronossc

In diesem Beispiel in vanilla javascript funktionieren sollte:

var timer = 0
var delay = 200
var prevent = false

node.onclick = (evnt) => {
    timer = setTimeout(() => {
         if(!prevent){
             //Your code
         }
         prevent = false
    }, delay)
}
node.ondblclick = (evnt) => {
    clearTimeout(timer)
    prevent=true
    //Your code
}

InformationsquelleAutor der Antwort Ismayil Niftaliyev

-2

Gibt es eine elegantere Art und Weise dem Umgang mit diesem Problem, wenn Sie mit backbonejs:

 
initialize: function(){ 
diese.addListener_openWidget(); 
} 

addListener_openWidget: function(){ 
diese.listenToOnce( this, 'openWidgetView', function(e){dieses.openWidget(e)} ); 
}, 

events: { 
'klicken Sie auf #openWidgetLink' : function(e){dieses.trigger('openWidgetView',e)}, 
'klicken Sie auf #closeWidgetLink' : 'closeWidget' 
}, 

openWidget: function( e ){ 
//Mach dein Zeug 
}, 

closeWidget: function(){ 
diese.addListener_openWidget(); 
}

InformationsquelleAutor der Antwort Adam Malchi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.