jquery之2 个不同项目上的双击事件仍然会触发_编程设计

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

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

你可以在这个jsfiddle中见证这个问题

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

如何在单击不同项目时阻止触发双击事件？

请您参考如下方法:

您看到此行为是因为在附加元素后仍在触发 dbclick 事件。

换句话说，当单击第二个列表中的某个项目时，第二个 Click 事件大约与 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。
我使用事件委托(delegate)来避免嵌套事件监听器(尽管您已经意识到这一点)。
由于您使用的是 jQuery 版本 1.6.4，因此您将使用 .delegate() 方法而不是 .on() 方法。

<小时 />

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

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