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

Question

我有一个简单的 dblClick 函数工作。我需要使用 jQuery UI 使我的画布 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');
});

这是一个小提琴

score 1 · Accepted Answer

这是一篇类似的帖子，讨论了单个 DOM 元素的不兼容.selectable()问题.dblclick()，我怀疑这里也发生了类似的事情。如果您取消.ui-selected活动，您将能够恢复您的双击：

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

这是一个新的 Fiddle，显示了现在的双击工作。

score -1 · Accepted Answer

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

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

score -2 · Accepted Answer

我在这里修好了，现在可以了。不知道为什么要让画布可选。

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

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

用上面的代码试试。请注意解释为什么要对画布执行 selectable() 。

3 回答 3