jQuery UI Selectable - mouseup 未触发

Question

我有一个项目列表，单击拖动并选择我使用了 jQuery UI Selectable。选择部分工作顺利，但我已将“mousedown”和“mouseup”事件委托给项目列表，但是当我包含 jquery-ui.css 文件时不会触发“mouseup”事件。

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 事件被正确触发，并且选择也按预期工作。

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

JSBINLINK

Answer 1

这个问题/行为已经在SO 和 jQuery forums 和issue tracker 上讨论过 - 它归结为有一个辅助 DIV 被注入以显示视觉“套索”用户会看到是否在可选项目周围单击并拖动。这个套索 DIV 位于鼠标和可选元素之间，因此会干扰 mouseup 事件。

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

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

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