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

【问题标题】：How to enable dblclick event on elements which was binded with JQuery UI Selectable plugin?如何在与 JQuery UI Selectable 插件绑定的元素上启用 dblclick 事件？
【发布时间】：2011-02-27 15:15:57
【问题描述】：

就我而言，我有一个带有JQuery UI Selectable 插件的UL，但同时，我希望该项目女巫与selectable plugin 绑定时我double click 这个项目正在做某事。但似乎JQuery UI Selectable plugin had block the dblclick event。那么，我怎样才能让它工作呢？

例如：

<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>

非常感谢！！

【问题讨论】：

当元素试图同时处理单击和双击时，您将永远无法使页面正常工作。代码会太复杂，浏览器不配合，用户绝对会讨厌。

标签： jquery user-interface selectable

【解决方案1】：

如果您添加 .ui-selected 以取消传递给 selectable 方法的选项，那么您可以双击 b/c 它不会在 .ui-selected 项目上引发选择事件。

$('#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.
});

【讨论】：

我相信现在在 1.7 中，绑定事件的 on() 方法应该用于 .ui 选择的点击，这样它们就可以被“委托”，这意味着随着元素的增加和减少.ui-selected 类，它们会自动获得和失去事件处理程序。这看起来像： $('#selectable').on('click', '.ui-selected', function() { ...
使用 .on 方法更新了答案。谢谢迈克尔

【解决方案2】：

您只需将距离设置为大于 0 的数字即可记录点击和双击。

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

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

【讨论】：

这是一种巧妙的做法，但会停止鼠标单击选择

【解决方案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);
        }
    }
});

【讨论】：

这不是有效的代码。您必须将event.currentTarget 保存在局部变量中才能正常工作。请修复它。你的回答是最有效的。

【解决方案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 中找到了这个解决方法

【讨论】：

【解决方案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，这样不会阻止双击事件，但如果用户真的开始选择，我将可用。

【讨论】：

【解决方案6】：

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

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

我不确定这会起作用，因为这两个事件都是点击事件。

【讨论】：

这不是“链接事件”。它只是调用两个函数，一个接一个。它被称为“链接”，与事件无关。