双击事件仍会触发2个不同的项目

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触发之前是否触发了最后一次单击。

更新的示例

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不会触发委托事件。

更新的示例

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

我觉得这两种解决方案都比较黑客，但尽管如此，它们似乎仍然有效。