如何在使用JQuery UI可选插件绑定的元素上启用dblclick事件？

Question

在我的情况下，我有一个申请JQuery UI Selectable插件的UL，但是同时我希望物品女巫被绑定了selectable plugin当时我正在做一些事情，当我double click这个item.But好像是JQuery UI Selectable plugin had block the dblclick event。那么，我怎样才能使它工作？

E.g：

<script> 
    $(function() { 
     $("#selectable").selectable(); 

       $("#selectable").dblclick(function(){ 
        // do something here 
       }) 
    }); 
    </script> 

<ul id="selectable"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ul> 

非常感谢您！

Answer 1

在jQuery中您可以链接事件，就像这样：

$("#selectable").selectable().dblclick(); 

位我不知道这会工作，因为这两个事件是单击事件。

Answer 2

$("#selectable li").mousedown(function(event) { 
    if(event.which==1) 
    { 
     if($(event.currentTarget).data('oneclck')==1) 
     { 
      alert('click'); 

      return false; 
     } 
     else 
     { 
      $(this).data('oneclck', 1); 
      setTimeout(function(){ 
       $(event.currentTarget).data('oneclck', 0); 
      }, 200); 
     } 
    } 
}); 

Answer 3

如果添加的.ui-选择取消传入可选方法，那么你可以双击B/C它不会的.ui选择的项目筹集选择事件的选项。

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

虽然这确实会消除取消选择所选项目的能力。您可以执行以下操作手动取消选择：

$('.ui-selected').on('click', function() { 
    $(this) 
    .removeClass('ui-selected') 
    .parents('.ui-selectable') 
    .trigger('selectablestop'); 

    // you might also want to trigger selectablestop. 
}); 

Answer 4

您只需将距离设置为> 0即可注册点击次数和双击次数。

$("#selectable").selectable({ 
    distance: 1 
}); 

参见http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event

Answer 5

这是因为onmousedown事件触发选择事件（即选择多个可选元素的虚线DIV）。我有同样的问题，我通过添加代码的几行到固定它JQUERY UI库。你必须做的是在鼠标移动几个像素后通过启动它来延迟选择事件。这可以让你双击元素，仍然有用户友好的选择！ ：d

这是一个延迟的选择和部分代码解决您的问题：

<script> 
    var content = $('#content').selectable(); 

    var _mouseStart = content.data('selectable')['_mouseStart']; 

    content.data('selectable')['_mouseStart'] = function(e) { 
     _mouseStart.call(this, e); 
     this.helper.css({ 
      "top": -1, 
      "left": -1 
     }); 
    }; 
</script> 

我发现这个解决办法在此post

Answer 6

我用这个，我认为这是最好的解决办法。

$("ul").selectable({ 
    filter: "li" 
}); 

$("ul").on("mousedown","li",function(e){ 
    var n = ($(e.toElement).is(".ui-selected")) ? 1 : 0; 
    $("#filelist").selectable("option", "distance", n); 
}); 

当用户开始对我设置distance一个选定的元素的点击，这样的不阻止双击事件，但我可以当用户真正开始选择。