Question

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

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

你可以在这个jsfiddle中看到问题

$('.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);
});

我觉得这两种解决方案都相对苛刻，但它们似乎都有效。

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

1 个答案: