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

Question

我试图让第一个列表中的项目在双击时移动到第二个列表。然后，当您单击它时，将其移回第一个列表。

我遇到的问题是，当快速点击第二个列表中的项目时，会触发双击事件，尽管没有点击同一个项目。

你可以在这个 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 事件。

在下面的示例中，每次触发 click 事件时都会更新 lastClickTimeStamp 变量。为了防止您看到的奇怪行为，我们会检查是否在触发 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() 方法。

---

正如我在 cmets 中指出的那样，您也可以延迟将该元素附加到第一个列表中。这样做时，委托的 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);
});

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