Двойной щелчок на двух разных элементах по-прежнему триггеров

Question

Я пытаюсь сделать элемент из 1 списка перейдите во второй список, когда он дважды щелкнут. Затем, когда вы нажмете его, переместите его обратно в первый список.

Проблема, с которой я столкнулся, заключается в том, что при быстром нажатии элементов во втором списке срабатывают события двойного щелчка, несмотря на то, что они не нажимают на один и тот же элемент.

Вы можете наблюдать проблемы в этом jsfiddle

https://jsfiddle.net/9afn4s7q/

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

Как остановить двойное событие щелчка от срабатывания при нажатии различных предметов?

Answer 1

Вы видите это поведение, потому что событие dbclick все еще запущено после добавления элемента.

Другими словами, при нажатии на элемент во втором списке событие второго клика запускается примерно в то же время, что и событие dbclick. Чтобы обойти это, вы могли бы сравнить временные метки событий, чтобы определить, произошло ли второе событие click событие dbclick после его добавления.

В приведенном ниже примере переменная lastClickTimeStamp обновляется каждый раз при запуске события click. Чтобы предотвратить странное поведение, которое вы видите, проверяется, был ли запущен последний щелчок перед запуском события dbclick.

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); 
}); 

Боковые ноты:

• Я добавил 100ms для учета возможных приближений временных меток. Возможно, отметки времени события могут варьироваться всего лишь от 1ms.
• Я использовал делегирование событий, чтобы избежать вложенных прослушивателей событий (хотя вы уже знали об этом).
• Поскольку вы используете jQuery версии 1.6.4, вы должны использовать метод .delegate() вместо метода .on().

---

Как я отметил в комментариях, вы можете в качестве альтернативы добавить элемент в первый список с задержкой. При этом делегированное событие dbclick не запускается.

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); 
}); 

Я чувствую, что оба эти решения относительно хака, но, тем не менее, они, кажется, работают.