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

如果你添加.ui-selected来取消传入可选方法的选项，那么你可以双击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 2

您只需将距离设置为数字＆gt; 0表示点击和双击。

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

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

Answer 3

$("#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 4

这是因为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 5

我使用它，我认为这是最好的解决方案。

$("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设置为1，这样就不会阻止双击事件，但如果用户真的开始选择，我就可以使用。

Answer 6

在jQuery中，您可以链接事件，如下所示：

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

我不确定这是否有效，因为这两个事件都是点击事件。

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

6 个答案: