为什么jQuery selectable会破坏这个点击功能？

Question

我有一个简单的dblClick功能。我需要使用jQuery UI使我的canvas div可选，但这样做会破坏dblClick函数。

HTML

<div id="canvas">
    <div class="trigger">Click me</div>
    <div class="box"></div>
</div>

的Javascript

$('#canvas').selectable();

$('.trigger').dblclick(function() {
    $('.box').toggleClass('active');
});

这是Fiddle

Answer 1

单个DOM元素上的.selectable()和.dblclick()类似post discussing the incompatibility，我怀疑这里发生了类似的事情。如果您取消.ui-selected活动，则可以取消双击：

$('#canvas').selectable({ 
   cancel: '.ui-selected' 
});

这是一个显示双击的new Fiddle。

Answer 2

$('.trigger').dblclick(function() {
$('.box').toggleClass('active');
});

$('#canvas').selectable({ cancel: ".trigger" });

Answer 3

我在这里修好了，现在就可以了。不确定为什么你要选择画布。

我删除了可选择的类，并添加了.on事件：

$('.trigger').on('dblclick',function() {
    $('.box').toggleClass('active');
}); 

使用上面的代码尝试一下。请注意解释为什么你在画布上做了selectable（）。