Question

我有一个项目列表，单击拖动并选择我已经使用过jQuery UI Selectable。选择部分工作顺利，但我已委托＆＃34; mousedown＆＃34;和＆＃34; mouseup＆＃34;事件到项目列表，但＆＃34; mouseup＆＃34;当我包含jquery-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>

当我包含＆＃34; jquery-ui.css＆＃34;时，不会触发mouseup事件。文件。但当我删除＆＃34; jquery-ui.css＆＃34;文件正确触发mouseup事件，选择也按预期工作。

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

JSBIN LINK

Answer 1

此问题/行为已在SO和jQuery forums＆amp; issue tracker - 它归结为这样一个事实：有一个辅助DIV被注入以显示视觉＆＃34;套索＆＃34;用户将看到是否在可选项目周围进行单击和拖动。这个套索DIV位于鼠标和放大器之间。可选元素因此干扰了mouseup事件。

所有引用的链接都提出了两个选项：

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

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

jQuery UI Selectable - 不会触发mouseup

1 个答案: