Doppelklick-Ereignis bei 2 verschiedenen Elementen löst immer noch aus

Question

Ich versuche, ein Objekt aus 1 Liste in eine zweite Liste zu verschieben, wenn doppelt geklickt wird. Wenn Sie dann einfach darauf klicken, verschieben Sie es zurück in die erste Liste.

Das Problem dabei ist, dass wenn Sie schnell auf Elemente in der zweiten Liste klicken, Doppelklick-Ereignisse ausgelöst werden, obwohl nicht auf den gleichen Artikel klicken.

Sie können das Problem in diesem jsfiddle Zeuge

https://jsfiddle.net/9afn4s7q/

$('.item').dblclick(function() { 
    $(this).detach(); 
    $('#list2').append($(this)); 
    $(this).click(function() { 
    $(this).detach(); 
    $('#list1').append($(this)); 
    }); 
}); 

Wie kann ich ein Doppelklickereignis stoppen auslöst, wenn verschiedene Elemente zu klicken?

Answer 1

Dieses Verhalten tritt auf, weil das Ereignis dbclick immer noch ausgelöst wird, nachdem das Element angehängt wurde.

Mit anderen Worten, wenn Sie auf ein Element in der zweiten Liste klicken, wird das zweite Klick-Ereignis ungefähr zur gleichen Zeit wie das dbclick Ereignis ausgelöst. Um dies zu umgehen, könnten Sie die Ereigniszeitstempel vergleichen, um festzustellen, ob das zweite Ereignis click nach dem Anhängen ein Ereignis dbclick ausgelöst hat. Im folgenden Beispiel wird die Variable lastClickTimeStamp jedes Mal aktualisiert, wenn das Ereignis click ausgelöst wird. Um das seltsame Verhalten zu verhindern, das Sie sehen, wird eine Überprüfung durchgeführt, um festzustellen, ob der letzte Klick ausgelöst wurde, bevor das Ereignis dbclick ausgelöst wird.

Updated Example

var lastClickTimeStamp = 0; 
$('#list1').on('dblclick', '.item', function(event) { 
    if (event.timeStamp > lastClickTimeStamp) { 
    $('#list2').append(this); 
    } 
}); 
$('#list2').on('click', '.item', function(event) { 
    lastClickTimeStamp = event.timeStamp + 100; 
    $('#list1').append(this); 
}); 

Side Hinweise:

• habe ich 100ms für potenzielle Zeitstempel Annäherungen zu berücksichtigen. Es ist möglich, dass die Ereigniszeitstempel um so wenig wie 1ms variieren.
• Ich verwendete Ereignisdelegierung, um die verschachtelten Ereignislistener zu vermeiden (obwohl Sie das bereits wussten).
• Da Sie jQuery Version 1.6.4 verwenden, würden Sie die .delegate() Methode anstelle der .on() Methode verwenden.

---

Wie ich in den Kommentaren darauf hingewiesen, könnten Sie alternativ das Element in der ersten Liste mit einer Verzögerung hängen. Das delegierte Ereignis dbclick wird dabei nicht ausgelöst.

Updated Example

$('#list1').on('dblclick', '.item', function(event) { 
    $('#list2').append(this); 
}); 
$('#list2').on('click', '.item', function(event) { 
    setTimeout(function() { 
    $('#list1').append(this); 
    }.bind(this), 5); 
}); 

Ich mag beide dieser Lösungen fühlen, sind relativ hackish, aber dennoch scheinen sie zu arbeiten.