jQuery UI 可选 - 不触发 mouseup

Question

我有一个项目列表，点击拖动和select我已经使用jQueryUI可选择。 selection 部分工作顺利，但我已将 "mousedown" 和 "mouseup" 事件委派给项目列表，但是当我包含 [=43] 时未触发 "mouseup" 事件=]-ui.css 文件.

HTML

<div id="favoritelist">
    <span>This is favorite list</span>
    <ol 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>
    </ol>
</div>

JS

$('#favoritelist').on("mouseup", function(){
    console.log('in favoritelist mouseup');
});

$('#favoritelist').on("mousedown", function(){
    console.log('in favoritelist mousedown');
});

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

我包含了以下文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

当我包含 "jquery-ui.css" 文件时，没有触发 mouseup 事件。但是当我删除 "jquery-ui.css" 文件时，mouseup 事件被正确触发并且 selection 也按预期工作。

我很困惑为什么当我包含 jquery-ui.css 文件时 mouseup 事件没有传播。

JSBIN LINK

Answer 1

这个 issue/behavior 已经在 SO and in the jQuery forums & issue tracker 上讨论过 - 它归结为一个事实，即有一个助手 DIV 被注入以显示视觉效果 "lasso" 用户会看到是否在可选择的项目周围单击并拖动。这个套索 DIV 位于鼠标和可选元素之间，因此会干扰 mouseup 事件。

引用的所有链接都建议两个选项：

在可选择的小部件上使用可选的 distance initialization parameter，或者
使用以下 CSS 覆盖：.ui-selectable-helper{pointer-events:none}

我发现后者更可靠，尽管前者是技术上首选的路线。

jQuery UI 可选 - 不触发 mouseup

jQuery UI Selectable - mouseup is not triggered

jquery

jquery-ui

jquery-ui-selectable